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正常工作，则必须包含additional-methods.js文件。

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

$(':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验证不能与validate插件一起使用

1 个答案: