Jquery 验证未应用于字段

Question

我有一个预先存在的表单，我正在尝试添加 jquery 验证以包含 :

         <p><span class="style9">City </span>
                        <input type="text" name="city" value="" size="20" class="style7"><span class="style9">
                        State </span>
                        <input type="text" name="state" value="" size="20" class="style7"><span class="style9">
                        Zip </span>
                        <input type="text" name="zip" value="" size="20" class="style7"><span class="style9">
                        Zip </span>
                        </p>

使用 jquery 验证器插件，我添加了：

$('form').validate({
    rules: {
        first_name: {
            minlen: 3,
            maxlength: 15,
            required: true
        },
        last_name: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        email: {
          required: true,
          email: true
        },
         phone1: {
             required: true,
             phoneUS: true
          },
        phone2: {
             required: true,
             phoneUS: true
          },
            street: {
            required: true
          },
              city: {
            required: true
          },
              state: {
            required: true
          },
              zip: {
            zipcodeUS: true
          }

    },
    highlight: function(element) {
        $(element).closest('.style9').addClass('.style13');
        //$(element).addClass('.style13');
    },
    unhighlight: function(element) {
        $(element).closest('.style9').removeClass('.style13');
        //$(element).removeClass('.style13');
    },
    errorElement: 'span',
    errorClass: 'style13',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

正如您在屏幕截图中看到的，前 2 个字段应用了验证，但最后一个没有。我做错了什么？

Answer 1

要使字段 "required" 留空，您必须在其上使用 required 规则...

zip: {
   required: true,  // <- prevent it from being left empty
   zipcodeUS: true
}

演示：http://jsfiddle.net/rr8u9a46/

如中所述，您还拼错了 first_name 字段中的 minlength 规则。

$('form').validate({
    rules: {
        first_name: {
            minlen: 3,  // <-- minlength
            maxlength: 15,
            required: true
        },
        .....

注意：要使用zipcodeUS方法，你必须包含the additional-methods.js file，其中包含这条规则.

Jquery 验证未应用于字段

Jquery validation not being applied to field

javascript

jquery

jquery-validate