jquery 検証 (これはすばらしい) と asp.net Web フォームで少し厄介な問題が発生しています。このフレームワークでのフォームの使用方法に問題があると思いますが、とにかくここに問題があります。
- 従業員が入力するフィールドがいくつかあるページがあります。従業員がレコードを送信/保存すると(asp.netボタンコントロール)、検証ルールがトリガーされ、存在する場合は相対的なエラーが表示されます(機能しているようで、ルールが必要です)動作しますが、その分には関係ありません）。
- 検証は正しくトリガーされ、画面の下部にリストされますが、画面の任意の場所をクリックすると、jQuery が再び起動したように見え、最初のエラーのみが表示されます (あらゆる種類のキーの押下/画面の最小化と同じです)。そのエラーが修正されると、リストの次のエラーが表示されます...
ノート：
私のフォームは、その中にコンテンツプレースホルダーがあるマスターページにあり、.net バージョンは 3.5 です (残念ながら、私が取り組んでいるサーバーによって制限されています)。
誰かが助けてくれたら、それは素晴らしいことです:D.
$(document).ready(function () {
$('.txt')
.focus(function () {
$('.txt').removeClass('focused');
$(this).addClass('focused');
})
.blur(function () {
$(this).removeClass('focused');
});
//Fire validation events
$("#aspnetForm").validate({
//Setting validations rules like, Required, Minimum or Maximum Length, Data Type etc.
rules:
{
//Set name of tag to validate: Name = UniqueID
<%= txtPointCode.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtPointName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtPointLocalName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtPortCode.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtCountryCode.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtCountryName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtAreaName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtRegionName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 },
<%= txtContinentName.UniqueID %> : { required: true, minlength: 5, maxlength: 10 }
},
//Contextual error messages for each selected field
messages:
{
<%= txtPointCode.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtPointName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtPointLocalName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtPortCode.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtCountryCode.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtCountryName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtAreaName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtRegionName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters.",
<%= txtContinentName.UniqueID %> : "This field cannot be empty, please enter between 5 - 10 characters."
},
//A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second,
//called in the context of the validator object.
showErrors: function (errorMap, errorList)
{
var messages = "";
var errorCount = 0;
//Error builder
$.each(errorList, function (index, value) {
var id = $(value.element).attr('id');
var elementName = $(value.element).attr('name').split('txt'); //Strip out UniqueID obfuscation
messages += "<span>" + (index + 1) + ". | <a noref title=\"Click to view field\" onClick=\"setFocus('" + id + "');\">[" + elementName[1] + "]</a> | " + value.message + "</span><br/>";
errorCount++;
});
messages = "<div class='errorWrapper'><hr><h1>Please correct the following " + errorCount + " errors:</h1><br /><br />" + messages + "</div>";
//Display error summary with slide animation
$('#summary-validation').html(messages);
$('#summary-validation').show("fast");
},
//If all validations are successfully validate then execute submitHandler function
submitHandler: function ()
{
$('#summary-validation').empty();
//alert("All fields are valid!");
$("#aspnetForm").submit();
},
onkeyup: false, //Stops validation refresh on occurances of certain key presses
onfocusout: false //Stops validation refresh when element loses focus
});
//-------------------------------------------------------------------------------
});
//If validation errors are occured in any field, it will display field name with link, clicking on link it will set focus of perticular field.
function setFocus(ele)
{
document.getElementById(ele).focus();
//$(ele).focus();
}