javascript - 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);
        }
    }
});

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

Answer 1

要使字段留空时成为“必填”，您必须对其使用required规则...

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

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

<小时/> <小时/>

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

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

<小时/>

注意:要使用 zipcodeUS 方法，您必须包含 the additional-methods.js file ，其中包含此规则。