/ / jquery検証は検証プラグインで動作しません-jquery、safari、jquery-validate

jqueryの検証がプラグインの検証で機能していない - jquery、safari、jquery-validate

  1. 最後の3つのフィールドで検証が機能していません。
  2. safari(バージョン5.1.7)では、すべてのフィールドでプラグインが機能しません。
  3. なぜモバイル分野のみが機能しているのですか?

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

回答:

回答№1は2
  1. あなたを取り除く validate 関数。 $.validate フォームの送信時ではなく、それ自体で準備ができたドキュメントで呼び出す必要があります。
  2. あなたの submitHandler 機能、フォームを送信する必要はありません、しない限り発生します return false
  3. プレースホルダーにエラーテキストを配置するというアイデア良い...間違った情報を入力するまで、プレースホルダーは「表示されず、間違った情報を入力したというフィードバックを受け取らない」ようになりました。
  4. phoneUSを機能させるには、additional-methods.jsファイルを含める必要があります。
  5. 要素を検証する正しい方法は 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/