jquery 验证不适用于验证插件

Question

验证不适用于最后 3 个字段。
在 Safari（版本 5.1.7）中，插件不适用于所有字段。
为什么只有移动领域有效？

HTML代码

    <form method='post' name='reservation-form' id='reservation-form' action="php/mail.php">
         <label>NAME</label><input type='text' name='fullname' id='fullname' placeholder='Make a resevation in the name of...'/>
              <label>EMAIL</label>
         <input type='text' name='emailid' id='emailid' placeholder='Email address..'/>
                 <label style='margin-left: 40px;'>MOBILE</label>
<input type='text' name='mobno' id='mobno' placeholder='Mobile number...'/>
           <label>TABLE FOR</label>
           <input type='text' name='tableno' id='tableno' placeholder="3"/>
                <label style='margin-left: 16px;'>DATE</label>
         <input type='text' name='date' id='date' placeholder="3/01/2015"/>
                <label style='margin-left: 35px;'>TIME</label>
              <input type='text' name='time' id='time' placeholder="05:10PM" required/>
                    <input type='submit' name='submit' id='submit' value='RESERVE TABLE'/>
             </form>

Jquery代码

   function validate(element) {
         $("#reservation-form").validate({
                rules: {
                        fullname: "required",
                        emailid: {
                                required: true,
                                email: true
                        },
                        mobno: {
                            required: true,
                            minlength: 10,
                            maxlength: 10,
                            phoneUS: true

                        },
                        tableno: {
                            required: true,
                            digits: true
                        },
                        date: {
                            required: true
                        },
                        time: {
                            required: true
                        }
                 },
                messages: {
                        fullname: "Please enter your fullname",
                        emailid: "Please enter a valid email address",
                        mobno: "Please enter a mobno",
                        tableno: "3",
                        date: "3/01/2015",
                        time: "05:10PM"
                },
             errorPlacement: function(error, element) { 

                console.log(element);
                 element.attr("placeholder",error.text());
             },
//             highlight: function(element, errClass, validClass) {
//         
//                $(element).addClass(errClass).removeClass('validClass');
//                $(element.form).$(find("#" + element.id)).closest('div').addClass('errClass');
//              },
//            unhighlight: function(element, errClass, validClass) {
//                $(element).removeClass(errClass).addClass('validClass');
//                $(element.form).$(find("#" + element.id)).closest('div').removeClass('errClass');
//            },

            submitHandler: function(form) {
              form.submit();
            }
        });// your validation stuff goes here
      }

        $(':input').bind("keyup change", function(event) {// validate signup form on keyup and submit
            if (event.keyCode === 9) {  
                validate(this);
            }
        });

        $('#submit').click(function() {
            validate(this);
        });

JSFIDDLE

Answer 1

摆脱你的 validate 功能。 $.validate 应该在文档准备好时调用，而不是在提交表单时调用。
在你的submitHandler函数中，你不需要提交表单，只要你不提交就会发生return false
您在占位符中放置错误文本的想法很好...直到他们输入错误内容，现在您的占位符不会显示，他们也不会得到任何输入错误信息的反馈。
如果您想让 phoneUS 正常工作，您必须包含额外的 methods.js 文件。

验证元素的正确方法是 v.element()，所以你的 keyup 代码应该是这样的（顺便说一下，我完全不同意这样做）：

$(':input').bind("keyup change", function(event) {// validate signup form on keyup and submit
    if (event.keyCode === 9) {  
        v.element(this);//where v comes from the call to $.validate, i.e. var v = $.validate({...});
    }
});

我清理了其中的一些问题并在此处更新了您的代码：http://jsfiddle.net/mz7humqt/2/

jquery 验证不适用于验证插件

jquery validation is not working with validate plugin

safari

jquery

jquery-validate