私はここ数日JqueryValidateで遊んでいますが、実際に何かを検証するためにJqueryValidateを取得できないようです。アイデアは、AJAXを介してCRUD操作を実行するフォームがあるということですが、AJAX操作を許可する前に、検証をトリガーし、すべてがOKの場合にのみデータの送信を許可したいと思います。しかし、何らかの理由で、データが有効かどうかに関係なく送信されており、ファイアバグエラーや問題を示すものは何も取得されていません。
これが私のコードです（別のファイルにありますが、その前にJqueryと検証ファイルが含まれています）：
ルールとメッセージ：
var rules = {
id: {required: true,number: true,minlength: 9,maxlength: 9},
forename: {required: true,maxlength: 255},
surname: {required: true,maxlength: 255},
addr1: {required: true,maxlength: 255},
addr2: {required: true,maxlength: 255},
addr3: {required: true,maxlength: 255},
addr4: {required: true,maxlength: 255},
postcode: {required: true,postUK: true},
pemail: {required: true,email:true},
wemail: {required: true,email:true},
hphone: {required: true, phoneUK: true},
wphone:{required:true,phoneUK:true},
mphone: {required: true,phoneUK: true}};
var messages = {
id: {
required: 'The student id field cannot be empty ',
number: 'The id must consist of whole numbers only ',
minlength: $.validator.format("Your id length of {0} is not right must be at least 9"),
maxlength: $.validator.format("Your id length of {0} is not right must be no more than 9")
},
forename: {
required: 'The forename cannot be empty',
maxlength: 'The forename cannot be more than 255 charters'
},
surname: {
required: 'The surname field cannot be empty',
maxlength: 'The forename cannot be more than 255 charters'
},
addr1: {
required: 'The address 1 field cannot be empty',
maxlength: 'The address 1 cannot be more than 255 charters'
},
addr2: {
required: 'address 2 field cannot be empty',
maxlength: 'address 2 cannot be more than 255 charters'
},
addr3: {
required: 'address 3 field cannot be empty',
maxlength: 'address 3 cannot be more than 255 charters'
},
addr4: {
required: 'address 4 field cannot be empty',
maxlength: 'address 4 cannot be more than 255 charters'
},
postcode: {
required: 'The post code field cannot be empty',
postUK: 'The provided post code is not in the correct format'
},
wemail: {
required:' work email field cannot be empty',
email:'The work email address provided is not a valid email address '
},
pemail: {
required: 'personal email field cannot be empty',
email: 'The personal email address provided is not a valid email address'
},
hphone: {
required: 'home phone number field cannot be empty',
phoneUK: 'The home phone number provided is not valid'
},
mphone: {
required: 'mobile phone number field cannot be empty',
phoneUK: 'The mobile phone number provided is not valid'
},
wphone: {
required: 'work phone number field cannot be empty',
phoneUK: 'The home phone number provided is not valid'
}};
セットアップの検証:(有効な英国の電話と投稿を確認するためのいくつかの方法を追加しました）
jQuery.validator.addMethod('phoneUK', function(value, element) {
return this.value.length > 9 &&
value.match(/^(((\+44)? ?(\(0\))? ?)|(0))( ?[0-9]{3,4}){3}$/);
});
jQuery.validator.addMethod('postUK', function(value, element) {
var regex = /[A-Z]{1,2}[0-9R][0-9A-Z]? [0-9][ABD-HJLNP-UW-Z]{2}/i;
return regex.test(value);
});
実際の検証：
$('#detailsForm').validate({
rules: rules,
messages: messages,
highlight: function(element) {
$(element).addClass('errorInput');
},
unhighlight: function (element) {
$(element).removeClass('errorInput');
}
});
var valid = $('#detailsForm').valid(); // echo of this always seems to return true ??
if (!valid ) {
alert ("The data you have inputted contains errors which have been highlighted ");
return;
}
else { // do Ajax request this seems to be triggered no matter how I try to validate.
長いもので申し訳ありませんが、誰か助けてもらえますか？
前もって感謝します
更新：要求されたページHTML：
<form type ="text" id ="detailsForm" >
<div id ="row1" class="row" >
<label for='id'> ID:
<br/>
<input id ="id" name ="id" class="standardInput" />
</label>
<label for='forename'> Forename:
<br/>
<input type ="text" id="forename" name="forename" class="standardInput"/>
</label>
<label for='surname' > Surname:
<br/>
<input type ="text" id ="surname" name ="surname" class="standardInput"/>
</label>
<label for ="modeID"> Mode ID:
<br/>
<select id ="modeID" name ="modeID" class="standardInput">
<option value ="123">123</option>
<option value ="153">153</option>
<option value ="44">44</option>
</select>
</label>
<label for ="routeID"> Route ID:
<br/>
<select id ="routeID" name ="routeID" class="standardInput">
<option value ="g12">g12</option>
<option value ="g13">g13 2</option>
<option value ="H1">H1</option>
</select>
</label>
</div>
<div id ="row2">
<label for ="addr1"> Address Line 1:
<br/>
<input type ="text" id="addr1" name ="addr1" class="standardInput"/>
</label>
<label for ="addr2"> Address Line 2:
<br/>
<input type ="text" id="addr2" name ="addr2" class="standardInput"/>
</label>
<label for ="addr3"> Address Line 3:
<br/>
<input type ="text" id="addr3" name ="addr3" class="standardInput"/>
</label>
<label for ="addr4"> Address Line 4:
<br/>
<input type ="text" id="addr4" name ="addr4" class="standardInput"/>
</label>
<label for ="postcode"> Post code:
<br/>
<input type ="text" id="postcode" name ="postcode" class="standardInput"/>
</label>
</div>
<div id ="row3" class ="row">
<label for ="pemail"> Personal email:
<br/>
<input type ="text" id="pemail" name="pemail" class="standardInput"/>
</label>
<label for ="wemail"> Work email:
<br/>
<input type ="text" id="wemail" name ="wemail" class="standardInput"/>
</label>
<label for ="wphone"> Work phone No.:
<br/>
<input type ="text" id="wphone" name ="wphone" class="standardInput"/>
</label>
<label for ="hphone"> Home phone No.:
<br/>
<input type ="text" id="hphone" name ="hphone" class="standardInput"/>
</label>
<label for ="mphone"> Mobile phone No.:
<br/>
<input type ="text" id="mphone" name ="mphone" class="standardInput"/>
</label>
</div>
</form>
</div>
アップデート2：
検証はIDではなく名前を使用するので、すべてのフィールドにIDとまったく同じ名前を追加しましたが、結果は同じです。つまり、無効なデータが入力されても、validateはtrueを返しますか？