исходные коды
Вообщем-то, пришлось столкнуться с такой задачей: есть разметка с использованием стандартных валидаторов, нужно изменить работу валидаторов таким образом, чтобы вместо вывода сообщений об ошибках подсвечивать соотвествующий контрол рамкой или вообще менять стиль css.
В результате родился скрипт, текст которого приведен в конце топика.
В качестве примера покажу, как выглядит страница с использованием стандартных валидаторов:
И после применения javascript:
Чтобы добиться такого эффекта, мне требуется дописать в конце страницы или на событие pageLoaded (если использую на странице ScriptManager & PageRequestManager) следующий javascript-код:
Свойство invalidatedControlStyleName используется для указания, какой стиль будет применен к валидируемому контролу в случае, если сам валидатор !isvalid; После того, как валидатор стал валидным - восстанавливается тот класс контрола, который был до применения стиля;
И описать соотвествующий стиль:
Также поддерживается та ситуация, когда к контролу применяется несколько валидаторов, например:
Собственно, сам код javascript-класса Web.Customization:
удачи в использовании, надеюсь, сама идея решения кому-нить пригодится...
Вообщем-то, пришлось столкнуться с такой задачей: есть разметка с использованием стандартных валидаторов, нужно изменить работу валидаторов таким образом, чтобы вместо вывода сообщений об ошибках подсвечивать соотвествующий контрол рамкой или вообще менять стиль css.
В результате родился скрипт, текст которого приведен в конце топика.
В качестве примера покажу, как выглядит страница с использованием стандартных валидаторов:
 |
И после применения javascript:
 |
Чтобы добиться такого эффекта, мне требуется дописать в конце страницы или на событие pageLoaded (если использую на странице ScriptManager & PageRequestManager) следующий javascript-код:
<script language="javascript" type="text/javascript">
Web.Customization.validatorsStylingApply();
Web.Customization.invalidatedControlStyleName = "invalidatedControl";
Web.Customization.invalidatedSelectControlStyleName = "invalidatedSelectControl";
</script>
Свойство invalidatedControlStyleName используется для указания, какой стиль будет применен к валидируемому контролу в случае, если сам валидатор !isvalid; После того, как валидатор стал валидным - восстанавливается тот класс контрола, который был до применения стиля;
И описать соотвествующий стиль:
<style type="text/css">
.invalidatedControl {
border: 2px solid #DD0000;
}
</style>
Также поддерживается та ситуация, когда к контролу применяется несколько валидаторов, например:
<td>
<asp:TextBox ID="txtAdministrativeEmail" runat="server" Text="" Columns="40" MaxLength="40" Width="240px"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server"
ControlToValidate="txtAdministrativeEmail"
SetFocusOnError="false"
EnableClientScript="true"
Display="Dynamic"
ErrorMessage="Enter the correct administrative email"
Font-Size="12pt"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail"
runat="server"
ControlToValidate="txtAdministrativeEmail"
Display="Dynamic"
SetFocusOnError="false"
EnableClientScript="true"
ErrorMessage="Invalid administrative email, please enter correct value..."
ValidationExpression=".*@.*\..*" ></asp:RegularExpressionValidator>
</td>
Собственно, сам код javascript-класса Web.Customization:
/* customization of validation controls */
var Web = {};
Web.Customization = function() {
///
///Helper class for the standart asp.net validators styling
///
this.invalidatedControlStyleName = "invalidatedControl";
this.invalidatedSelectControlStyleName = "invalidatedControl";
}
Web.Customization.prototype.validate = function() {
///
///Custom Validation proxy method
///
var hooked_result = false;
if (typeof Page_Validators != 'undefined' &&
Page_Validators != null) {
if (this["fwvalidator"] != null) {
var validator = this["fwvalidator"];
var fwevaluationfunction_object = eval("hooked_validator = " + this["fwevaluationfunction"]);
eval("hooked_result = hooked_validator(validator);")
validator.isvalid = hooked_result;
var object = $get(this["controltovalidate"]);
var controlstyle = "";
if (hooked_result) {
for (var i = 0; i < Page_Validators.length; i++) {
var previousValidator = Page_Validators[i];
if (previousValidator.controltovalidate == this.controltovalidate) {
if (previousValidator.id != this.id) {
hooked_result = previousValidator.isvalid;
}
else if (previousValidator.id == this.id) {
break;
}
}
}
}
if (hooked_result) {
if (this["controlstyle"] != null) {
controlstyle = this["controlstyle"];
object.className = controlstyle;
}
else
object.removeAttribute("className");
if (object.tagName == 'SELECT') {
var parentObj = object.parentElement;
if (parentObj.tagName == 'DIV') {
parentObj.removeAttribute("className");
}
}
}
else {
if (object.tagName == 'SELECT') {
var parentObj = object.parentElement;
if (parentObj.tagName == 'DIV') {
parentObj.className = Web.Customization.invalidatedSelectControlStyleName;
}
}
else {
object.className = Web.Customization.invalidatedControlStyleName;
}
}
}
}
return hooked_result;
};
Web.Customization.prototype.validatorsStylingApply = function() {
///
///Applies the custom styling logic into the all validators on the current page
///
if (typeof Page_Validators != 'undefined' &&
Page_Validators != null) {
var validators = Page_Validators;
for (var i = 0; i < validators.length; i++) {
if (validators[i].attributes["evaluationfunction"] != null) {
if (validators[i].attributes["display"] != null) {
validators[i].attributes.removeNamedItem("display");
}
var displayAttribute = document.createAttribute("display");
displayAttribute.value = "None";
validators[i].attributes.setNamedItem(displayAttribute);
if (validators[i]["fwvalidator"] == null) {
validators[i]["fwvalidator"] = validators[i];
validators[i]["fwevaluationfunction"] = validators[i].attributes["evaluationfunction"].value;
validators[i]["controltovalidate"] = validators[i].attributes["controltovalidate"].value;
var control = $get(validators[i]["controltovalidate"]);
if (control != null &&
control.className != null &&
control.className != '')
validators[i]["controlstyle"] = control.className;
validators[i].attributes["evaluationfunction"].nodeValue = Web.Customization.validate;
}
}
}
}
}
/* global objects initialization */
Web.Customization = new Web.Customization();
удачи в использовании, надеюсь, сама идея решения кому-нить пригодится...
Сообщения
