JSFIDDLEへのリンクは次のとおりです。
こんにちは
JQueryバリデータープラグインとそのAPIを学んでいます。私はもうすぐそこにいますが、実装したいソリューションに関する確かな例を見つけることができないようです。私は多くのオンライン検索を行い、断片を見つけましたが、これをうまく説明するものは何もありません。
私はこれらのフィールドを持つ単純なフォームを持っています：
- ファーストネーム
- 苗字
- Eメール
- 電話
現在、これらのフィールドは、カスタムメソッドやエラーメッセージなしで検証されています。したがって、フォームが空のフィールドで送信された場合、「required*」がポップアップ表示されます。
私がやりたいのは、フィールドが空白/空かどうかをチェックするだけでなく、フィールドを検証することです。たとえば、次のようになります。
ファーストネーム：
- フィールドが空白/空ではありません
- フィールドに英数字が含まれていません
電話：
- フィールドが空白/空ではありません
- フィールドには数字のみが含まれます
私はカスタムバリデーターメソッドの実装に非常に慣れていないので、それに応じて正しいエラーメッセージを表示する方法がわかりません。したがって、電話フィールドが空白ではなく、コンテナの数字以外の文字である場合は、フラグを付けて、このフィールドは数字のみを受け入れるというエラーメッセージを表示したいと思います。
現在、バリデーターのメッセージオブジェクト内に「required *」というエラーメッセージが表示されていますが、エラーメッセージを詳細なレベルで実装する方法がわかりません。
大変お世話になりましたことをお詫び申し上げます。誰かが私を正しい方向に向けてくれれば幸いです。ありがとうございました
JSFIDDLEへのリンクは次のとおりです。
<div class="wrapper">
<form id="contactForm" action="" method="post" enctype="multipart/form-data">
<div class="fieldGroup">
<!-- FIRST NAME --->
<lable for="firstname">First Name: </label>
<input type="text" id="firstname" name="firstname" size="25" maxlength="25" >
</div>
<!-- LAST NAME -->
<div class="fieldGroup">
<lable for="lastname">Last Name: </label>
<input type="text" id="lastname" name="lastname" size="25" maxlength="25" >
</div>
<!-- EMAIL -->
<div class="fieldGroup">
<lable for="email">Email: </label>
<input type="text" id="email" name="email" size="25" maxlength="40" >
</div>
<!-- PHONE -->
<div class="fieldGroup">
<lable for="lastname">Phone: </label>
<input type="text" id="phone" name="phone" size="12" maxlength="12" >
xxx-xxx-xxxx
</div>
<div class="fieldGroup">
<input type="submit" id="SubmitBtn" value="Submit" >
<input type="reset" id="ResettBtn" value="Reset" >
</div>
</form>
</div>
JAVASCRIPT
(function($,W,D)
{
var JQUERY4U = {};
JQUERY4U.UTIL =
{
setupFormValidation: function()
{
//form validation rules
$("#contactForm").validate({
rules: {
firstname: {
required: true,
chkData: true
},
lastname: {
required: true,
minlength: 2,
maxlength: 15
},
address1:{
required: true,
minlength: 8,
maxlength: 30
},
city:{
required: true,
minlength: 8,
maxlength: 25
},
state:{
required: true
},
zipcode:{
required: true,
minlength: 5,
maxlength: 10
},
phone: {
required: true,
minlength: 10,
maxlength: 12
},
email:
{
required: true,
email: true
}
},
messages: {
firstname: "required *",
lastname: "required *",
address1: "required *",
city: "required *",
state: "required *",
zipcode: "required *",
phone: "required *",
email: "required *",
},
submitHandler: function(form) {
form.submit();
}
});
}
}
//when the dom has loaded setup form validation rules
$(D).ready(function($) {
$.validator.addMethod("chkData",
function(value, element){
alert(value);
},"SORRY");
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);