如何使用 jQuery 验证非输入或替代方法

Question

我正在尝试为非输入的自定义选择添加验证。我有一系列用户点击的图像，它们充当复选框，但实际上没有输入。我正在对表单的其余部分使用 jQuery 验证，想看看我是否可以添加验证，是否正在添加方法（我读到 jQuery 验证仅适用于输入）或单击提交即可使用的其他内容。

我想要类似的东西，但要像 jQuery 验证那样工作。

if(checkValue.length < 1) {
    alert("You need at least one interested selected.");
}

我尝试将上述 if 语句放在验证代码中规则部分的上方，但它会引发错误。

有没有人有任何我可以尝试的替代想法？

//Getting Value of the interest boxes
var interest = $('.interest');
var checkVal = '';
var checkValue = '';
interest.click(function() {
  checkVal = [];
  $(this).toggleClass('active');
  $('.interestBox', this).toggleClass('active');
  interest.each(function() {
   if($(this).is('.active')) {
    checkVal.push($(this).data('title'));
   }
  });
  checkValue = checkVal.join(', ');
  console.log(checkValue);
});

//Jquery Validate
$('#salesforce_submit').validate({
  rules: {
   first_name: {
    required: true,
    minlength: 2
   }
  },
  messages: {
   first_name: {
    required: "Please enter your first name",
    minlength: "Your first name seems a bit short, doesn't it?"
   }
  },
  submitHandler: function(form) {
   event.preventDefault();
   var datastring = $('#salesforce_submit').serialize();
   $.ajax({
    url: '/php/quoteSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     if (data == 'Error!') {
      alert(data);
     } else {

     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
  }
 });

.interest img {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" type="Post">
<div><input id="first_name" placeholder="First Name*" class="input block" maxlength="40" name="first_name" type="text"></div>
<h3 class="interestTitle">A</h3>
<div class="interest" data-title="A">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="A">
</div>
<h3 class="interestTitle">B</h3>
<div class="interest" data-title="B">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="B">
</div>
<h3 class="interestTitle">C</h3>
<div class="interest" data-title="C">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="C">
</div>
<input type="Submit" value="Submit">

完整代码：

<section class="sec90">
            <h3 class="subTC">Enter your information below.</h3>
            <form action="" id="salesforce_submit" method="POST" enctype="multipart/form-data">
                <input name="oid" type="hidden" value=""><input type="hidden" id="" id="interestValue" multiple="multiple" name="" value=""><input name="retURL" type="hidden"> <input name="lead_source" required="" type="hidden" value="Quote Form"> <input id="txt_medium" name="txt_medium" type="hidden" value=""> <input id="txt_source" name="txt_source" type="hidden" value=""> <input id="txt_campaign_name" name="txt_campaign_name" type="hidden" value=""> <input id="txt_term" name="txt_term" type="hidden" value=""> <input id="txt_content" name="txt_content" type="hidden" value="">
                <div><input id="first_name" placeholder="First Name*" class="input block" maxlength="40" name="first_name" type="text"></div>
                <div><input id="last_name" placeholder="Last Name*" class="input block" maxlength="80" name="last_name" type="text"></div>
                <div><input id="email" placeholder="Email*" class="input block" maxlength="80" name="email" type="email"></div>
                <div><input id="phone" placeholder="Phone* no dashes" class="input block" maxlength="12" name="phone" type="tel"></div>
                <div><input id="zip" placeholder="Zip/Postal Code*" class="input block" maxlength="5" name="zip" type="text" pattern= "[0-9]{5}"></div>
                <div><input id="company" placeholder="Company*" class="input block" maxlength="40" name="company" type="text"></div>
        </section>
        <section class="sec90">
                <h3 class="subTC">What are you interested in?*</h3>
                <div><input type="hidden" name="interestHidden" value=""></div>

        <section class="sec90" id="up">
                <h3 class="subTC">Describe your project*</h3>
                <div><textarea id="description" name="description" placeholder="Provide as much detail as possible"></textarea></div>
                <h3 class="subTC block">Have a .stp file or drawing example? Send it for quicker quote times.</h3>
                <input type="file" name="uploadedFile" class="inputfile" id="uploadedFile" data-multiple-caption="{count} files selected" multiple>
                <label for="uploadedFile" class="button"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg><span class="marL5">Upload file</span></label>
                <input type="hidden" name="MAX_FILE_SIZE" value="10000000">
                <div class="margBot40"></div>
        </section>
                <input name="submit" class="block testB" type="submit" value="SUBMIT QUOTE">
            </form>

JS:

var interest = $('.interest');
    var checkVal = '';
    var checkValue = '';
    var showMe = '';

    interest.click(function() {
        checkVal = [];
        $(this).toggleClass('active');
        $('.interestBox', this).toggleClass('active');
        interest.each(function() {
            if($(this).is('.active')) {
                checkVal.push($(this).data('title'));
            }
        });
        checkValue = checkVal.join(', ');
        console.log(checkValue);
        //Hidden interest input value
        var checkLength = checkVal.length;
        console.log(checkLength);
        $('[name="interestHidden"]').val(checkLength);

        var interestVal = $('interestValue').val() 
        interestVal = checkValue;
        showMe = interestVal;
        console.log('Hidden val is ' + showMe); 
    });
    /*$('#phone').keyup(function() {
        $(this).val($(this).val().replace(/(\d{3})\-?(\d{3})\-?(\d{4})/,'--'));
    });*/
    $('#phone').keydown(function (e) {
        var key = e.charCode || e.keyCode || 0;
        $text = $(this);
        if (key !== 8 && key !== 9) {
            if ($text.val().length === 3) {
                $text.val($text.val() + '-');
            }
            if ($text.val().length === 7) {
                $text.val($text.val() + '-');
            }
        }
        return (key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105));
    });

    var inputs = document.querySelectorAll( '.inputfile' );
    Array.prototype.forEach.call( inputs, function( input )
    {
        var label    = input.nextElementSibling,
            labelVal = label.innerHTML;

        input.addEventListener( 'change', function( e )
        {
            var fileName = '';
            if( this.files && this.files.length > 1 )
                fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
            else
                fileName = e.target.value.split( '\' ).pop();

            if( fileName )
                label.querySelector( 'span' ).innerHTML = fileName;
            else
                label.innerHTML = labelVal;
        });
    });

    $('#phone').keyup(function() {
        jQuery.validator.addMethod("alphanumeric", function(value, element) {
            //return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
            return this.optional(element) || /^[+]*[(]{0,1}[0-9]{1,3}[)]{0,1}[-\s\./0-9]*$/i.test(value);
        }, "Numbers and dashes only");
    });

    $('#salesforce_submit').validate({
        ignore: [],
        rules: {
            first_name: {
                required: true,
                minlength: 2
            },
            last_name: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
            phone: {
                required: true,
                //digits: true,
                minlength: 10,
                alphanumeric: true
            },
            zip: {
                required: true,
                digits: true,
                minlength: 5
            },
            company: {
                required: true,
                minlength: 2
            },
            interestHidden: {
                required: true,
                min: 1
            }/*,
            description: {
                required: true,
                minlength: 5
            }*/
        },
        messages: {
            first_name: {
                required: "Please enter your first name",
                minlength: "Your first name seems a bit short, doesn't it?"
            },
            last_name: {
                required: "Please enter your last name",
                minlength: "Your last name seems a bit short, doesn't it?"
            },
            email: {
                required: "Please enter your email address",
                email: "Please enter a valid email address"
            },
            phone: {
                required: "Please enter your phone number",
                digits: "Please enter a valid phone number with only numbers",
                minlength: "Your number seems a bit short, doesn't it?"
            },
            zip: {
                required: "Please enter your zip code",
                digits: "Please enter a valid zip code with only numbers",
                minlength: "Your zip code seems a bit short, doesn't it?"
            },
            company: {
                required: "Please enter your company name",
                minlength: "Your company name seems a bit short. Please enter at least 2 characters"
            },
            interestHidden: {
                required: "Please choose at least one interest",
                min: "At least one interest needs chosen"
            }/*,
            description: {
                required: "Please enter your project description",
                minlength: "Your description seems a bit short, doesn't it?"
            }*/
        },
        submitHandler: function(form) {
            event.preventDefault();
            var datastring = $('#salesforce_submit').serialize();
            $.ajax({
                url: '/php/quoteSend.php',
                type: 'POST',
                data: datastring
                ,
                success: function(data) {
                    console.log(data);
                    if (data == 'Error!') {
                        alert('Unable to submit form!');
                        alert(data);
                    } else {
                        $('#salesforce_submit')[0].reset();
                        $('#consult-success').show();
                        $('#salesforce_submit').hide();
                    }
                },
                complete: function() {
                    //$("#salesforce_submit").submit();
                    location.href = "";
                },
                error: function(xhr, textStatus, errorThrown) {
                    alert(textStatus + '|' + errorThrown);
                    console.log('error');
                }
            });
        }
    });

Answer 1

为什么不在继续提交过程之前检查checkValue？

//Getting Value of the interest boxes
var interest = $('.interest');
var checkVal = '';
var checkValue = '';
interest.click(function() {
  checkVal = [];
  $(this).toggleClass('active');
  $('.interestBox', this).toggleClass('active');
  interest.each(function() {
   if($(this).is('.active')) {
    checkVal.push($(this).data('title'));
   }
  });
  checkValue = checkVal.join(', ');
  console.log(checkValue);
});

//Jquery Validate

$('#salesforce_submit').validate({
  rules: {
   first_name: {
    required: true,
    minlength: 2
   }
  },
  messages: {
   first_name: {
    required: "Please enter your first name",
    minlength: "Your first name seems a bit short, doesn't it?"
   }
  },
  submitHandler: function(form) {
    if(checkValue.length>0){
   event.preventDefault();
   var datastring = $('#salesforce_submit').serialize();
   $.ajax({
    url: '/php/quoteSend.php',
    type: 'POST',
    data: datastring
    ,
    success: function(data) {
     if (data == 'Error!') {
      alert(data);
     } else {

     }
    },
    error: function(xhr, textStatus, errorThrown) {
     alert(textStatus + '|' + errorThrown);
     console.log('error');
    }
   });
      }else console.log('Please select at least one interest');
  }
 });

.interest img {
  height: 50px;
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form id="salesforce_submit" type="Post">
<div><input id="first_name" placeholder="First Name*" class="input block" maxlength="40" name="first_name" type="text"></div>
<h3 class="interestTitle">A</h3>
<div class="interest" data-title="A">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="A">
</div>
<h3 class="interestTitle">B</h3>
<div class="interest" data-title="B">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="B">
</div>
<h3 class="interestTitle">C</h3>
<div class="interest" data-title="C">
  <img src="https://www.mountaineers.org/images/placeholder-images/placeholder-400-x-400/image_preview" alt="C">
</div>
<input type="Submit" value="Submit">

Answer 2

怎么样，给你触发的所有复选框起相同的名字，例如"box"。添加此自定义规则 "img_check":

 jQuery.validator.addMethod("img_check", function() {
        $(input[name='box']).each( function(){
                     if $(this).is(':checked') {
                         return true
                     }
                })
                // No box was checked
                return false

}, "Please check at least one box");

然后添加这条规则：

rules: {
        first_name: {
            required: true,
            minlength: 2
        },
        box[]: {
           img_check: true
           }
    },

Answer 3

因为jQuery验证只验证select、textarea和各种类型的input元素¹，你唯一的选择是给它想要的东西。

创建隐藏元素...

<input type="hidden" name="myImage" value="0" />

当用户点击你的图片时，使用jQuery来操纵type="hidden"input元素的值...

$('#photo').on('click', function() {
    $('[name="myImage"]').val('1');
});

然后以编程方式验证其值。由于单击图像不会导致任何验证，因此您可以使用 .valid() 方法来触发对这些隐藏元素的验证...

$('[name="myImage"]').valid();

您需要利用 ignore 选项，因为默认情况下插件不会验证隐藏元素。 ignore: [] 将有效地禁用它并强制插件验证所有隐藏的元素...

$('#salesforce_submit').validate({
    ignore: [],
    rules: { ....

当然，您还需要制定适当的规则来正确验证隐藏元素的值。

由于消息将放置在隐藏元素附近，您必须利用 errorPlacement 函数有条件地放置此消息。

$('#salesforce_submit').validate({
    ignore: [],
    errorPlacement: function(error, element) {
        if (element.attr('name') == 'myImage') {
            // placement for hidden element
        } else {
            // default
            error.insertAfter(element);
        }
    }
    rules: { ....

¹ 较新版本的插件也支持具有 contenteditable 属性的元素。

如何使用 jQuery 验证非输入或替代方法

How to use jQuery validate for non-inputs or an alternative method

javascript

jquery

jquery-validate