- 最後の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);
});
回答:
回答№1は2- あなたを取り除く
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/