Как я могу выполнить некоторый javascript, когда обязательный полевой валидатор, прикрепленный к текстовому поле, не прошел проверку на стороне клиента? То, что я пытаюсь сделать, это изменить класс css текстового поля, чтобы красная рамка текстового поля была красной.
Я использую webforms, и у меня есть библиотека jquery, доступная мне.
Здесь быстро и грязно (но это работает!)
<form id="form1" runat="server">
<asp:TextBox ID="txtOne" runat="server" />
<asp:RequiredFieldValidator ID="rfv" runat="server"
ControlToValidate="txtOne" Text="SomeText 1" />
<asp:TextBox ID="txtTwo" runat="server" />
<asp:RequiredFieldValidator ID="rfv2" runat="server"
ControlToValidate="txtTwo" Text="SomeText 2" />
<asp:Button ID="btnOne" runat="server" OnClientClick="return BtnClick();"
Text="Click" CausesValidation="true" />
</form>
<script type="text/javascript">
function BtnClick() {
//var v1 = "#<%= rfv.ClientID %>";
//var v2 = "#<%= rfv2.ClientID %>";
var val = Page_ClientValidate();
if (!val) {
var i = 0;
for (; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$("#" + Page_Validators[i].controltovalidate)
.css("background-color", "red");
}
}
}
return val;
}
</script>
Вы можете использовать следующие script:
<script>
$(function(){
if (typeof ValidatorUpdateDisplay != 'undefined') {
var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = function (val) {
if (!val.isvalid) {
$("#" + val.controltovalidate).css("border", "2px solid red");
}
originalValidatorUpdateDisplay(val);
}
}
});
</script>
Этот код украшает исходную функцию ValidatorUpdateDisplay, отвечающую за обновление отображения ваших валидаторов, при необходимости обновляя controltovalidate.
Надеюсь, что это поможет,
Я думаю, вы хотели бы использовать Custom Validator, а затем использовать функцию ClientValidationFunction... Если это не поможет добавить класс css при ошибке.
Некоторое время назад я потратил на это несколько часов, и с тех пор я использую какую-то обычную js-магию для этого.
На самом деле это довольно просто и в том, как работает проверка ASP.NET. Основная идея - добавить класс css, чтобы прикрепить событие javascript для каждого элемента управления, для которого требуется быстрая визуальная обратная связь.
<script type="text/javascript" language="javascript">
/* Color ASP NET validation */
function validateColor(obj) {
var valid = obj.Validators;
var isValid = true;
for (i in valid)
if (!valid[i].isvalid)
isValid = false;
if (!isValid)
$(obj).addClass('novalid', 1000);
else
$(obj).removeClass('novalid', 1000);
}
$(document).ready(function() {
$(".validateColor").change(function() {validateColor(this);});
});
</script>
Например, это будет код для добавления в элементе управления текстовым полем ASP.Net. Да, вы можете поместить столько, сколько хотите, и это будет означать только добавление значения CssClass.
<asp:TextBox ID="txtBxEmail" runat="server" CssClass="validateColor" />
Что он делает, это инициировать проверку на стороне клиента ASP.Net при изменении рабочего контроля и применять класс css, если он недействителен. Поэтому для настройки визуализации вы можете положиться на css.
.novalid {
border: 2px solid #D00000;
}
Это не идеально, но почти:) и, по крайней мере, ваш код не пострадает от лишних вещей. А также лучший, работает со всеми типами валидаторов Asp.Net, настраиваемых событий.
Я не видел что-то вроде этого googling, поэтому я не хотел делиться своей трюкой с вами. Надеюсь, что это поможет.
дополнительные материалы на стороне сервера:
Через некоторое время, используя это, я также добавлю этот класс ".novalid" css из кода, когда вам нужна определенная проверка на вещи, которые, возможно, могут быть проверены только на стороне сервера следующим образом:
Page.Validate();
if (!requiredFecha.IsValid || !CustomValidateFecha.IsValid)
txtFecha.CssClass = "validateColor novalid";
else
txtFecha.CssClass = "validateColor";
Вот мое решение.
Преимущества по сравнению с другими решениями:
Недостатки:
КАК ИСПОЛЬЗОВАТЬ:
Объявить класс CSS "control_validation_error"
function Validation_Load() {
if (typeof (Page_Validators) != "object") {
return;
}
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var control = $("#" + val.controltovalidate);
if (control.length > 0) {
var tagName = control[0].tagName;
if (tagName != "INPUT" && tagName != "TEXTAREA" && tagName != "SELECT") {
// Validate sub controls
}
else {
// Validate the control
control.change(function () {
var validators = this.Validators;
if (typeof (validators) == "object") {
var isvalid = true;
for (var k = 0; k < validators.length; k++) {
var val = validators[k];
if (val.isvalid != true) {
isvalid = false;
break;
}
}
if (isvalid == true) {
// Clear the error
$(this).removeClass("control_validation_error");
}
else {
// Show the error
$(this).addClass("control_validation_error");
}
}
});
}
}
}
}
В качестве альтернативы просто перейдите через элементы управления страницей следующим образом: (требуется использование ссылки System.Collections.Generic)
const string CSSCLASS = " error";
protected static Control FindControlIterative(Control root, string id)
{
Control ctl = root;
LinkedList<Control> ctls = new LinkedList<Control>();
while ( ctl != null )
{
if ( ctl.ID == id ) return ctl;
foreach ( Control child in ctl.Controls )
{
if ( child.ID == id ) return child;
if ( child.HasControls() ) ctls.AddLast(child);
}
ctl = ctls.First.Value;
ctls.Remove(ctl);
}
return null;
}
protected void Page_PreRender(object sender, EventArgs e)
{
//Add css classes to invalid items
if ( Page.IsPostBack && !Page.IsValid )
{
foreach ( BaseValidator item in Page.Validators )
{
var ctrltoVal = (WebControl)FindControlIterative(Page.Form, item.ControlToValidate);
if ( !item.IsValid ) ctrltoVal.CssClass += " N";
else ctrltoVal.CssClass.Replace(" N", "");
}
}
}
Должен работать в большинстве случаев, а значит, вам не нужно обновлять его при добавлении валидаторов. Ive добавил этот код в cstom Pageclass, поэтому он запускает сайт на любой странице, к которой я добавил валидаторы.