asp.net - validacion - Cambie el color del cuadro de texto usando el Validador de campo obligatorio. Sin controles de extensión, por favor
validar formulario html5 sin submit (16)
Necesito cambiar el color de TextBox siempre que se active el validador de campo requerido al hacer clic en el botón Enviar
Aquí hay algunos HTML / JS autónomos que hacen el truco:
<html>
<head>
<script type="text/javascript">
function mkclr(cntl,clr) {
document.getElementById(cntl).style.backgroundColor = clr;
};
</script>
</head>
<body>
<form>
<input type="textbox" id="tb1"></input>
<input type="submit" value="Go"
onClick="javascript:mkclr(''tb1'',''red'');">
</input>
</form>
</body>
</html>
De otra manera,
$(document).ready(function() {
HighlightControlToValidate();
$(''#<%=btnSave.ClientID %>'').click(function() {
if (typeof (Page_Validators) != "undefined") {
for (var i = 0; i < Page_Validators.length; i++) {
if (!Page_Validators[i].isvalid) {
$(''#'' + Page_Validators[i].controltovalidate).css("background", "#f3d74f");
}
else {
$(''#'' + Page_Validators[i].controltovalidate).css("background", "white");
}
}
}
});
});
Hice un ejemplo de un localizador funcional de esto para asp.net regular, no .control-group
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<!-- http://.com/questions/196859/change-text-box-color-using-required-field-validator-no-extender-controls-pleas -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
AspValidatorValidate = ValidatorValidate;
ValidatorValidate = NicerValidatorValidate;
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties ''isvalid'' (bool) and
* ''controltovalidate'' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
// IF we should be paying any attention to this validator at all
if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) {
if (val.isvalid) {
// do whatever you want for invalid controls
$(''#'' + val.controltovalidate).removeClass(''error'');
} else {
// reset invalid controls so they display as valid
//$(''#'' + val.controltovalidate).parents(''.control-group:first'').addClass(''error'');
var t = $(''#'' + val.controltovalidate);
t.addClass(''error'');
}
}
}
function NicerValidatorValidate(val, validationGroup, event) {
AspValidatorValidating = validationGroup;
AspValidatorValidate(val, validationGroup, event);
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);
</script>
<style>
.error {
border: 1px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator>
<asp:Button ID="Button1" runat="server" Text="Button" />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox2" ErrorMessage="RegularExpressionValidator" ValidationExpression="/w+([-+.'']/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*"></asp:RegularExpressionValidator>
<br />
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="TextBox3" ErrorMessage="RangeValidator" MaximumValue="100" MinimumValue="0"></asp:RangeValidator>
</div>
</form>
</body>
</html>
Lo que puede hacer es registrar una función de Javascript que iterará a través de la matriz global Page_Validators después del envío y podrá establecer el fondo de manera apropiada. Lo bueno de esto es que puedes usarlo en todos tus controles en la página. La función se ve así:
function fnOnUpdateValidators()
{
for (var i = 0; i < Page_Validators.length; i++)
{
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
if (ctrl != null && ctrl.style != null)
{
if (!val.isvalid)
ctrl.style.background = ''#FFAAAA'';
else
ctrl.style.backgroundColor = '''';
}
}
}
El último paso es registrar la secuencia de comandos con el evento OnSubmit:
VB.NET:
Page.ClientScript.RegisterOnSubmitStatement(Me.GetType, "val", "fnOnUpdateValidators();")
DO#:
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "val", "fnOnUpdateValidators();");
Mantendrá el estado correcto de IsValid en todo su código y puede funcionar con todos sus controles.
Nota: Encontré esta solución del siguiente blog . Solo quería documentarlo aquí en caso de que el blog de origen deje de funcionar.
Me gustó la respuesta de Alexander, pero quería que el javascript fuera más genérico. Entonces, aquí hay una forma genérica de consumir los errores de un validador personalizado.
function ValidateTextBox(source, args) {
var cntrl_id = $(source).attr("controltovalidate");
var cntrl = $("#" + cntrl_id);
var is_valid = $(cntrl).val() != "";
is_valid ? $(cntrl).removeClass("error") : $(cntrl).addClass("error");
args.IsValid = is_valid;
}
Me gustó la respuesta de Rory, pero no funciona bien con ValidationGroups, ciertamente en mi instancia en la que tengo dos validadores en un campo activados por dos botones diferentes.
El problema es que ValidatorValidate marcará el validador como ''isValid'' si no está en el ValidationGroup actual, pero nuestro código de cambio de clase no presta atención. Esto significaba que la pantalla no era correcta (ciertamente IE9 parece no gustarle jugar).
para evitarlo hice los siguientes cambios:
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
AspValidatorValidate = ValidatorValidate;
ValidatorValidate = NicerValidatorValidate;
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties ''isvalid'' (bool) and
* ''controltovalidate'' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
// IF we should be paying any attention to this validator at all
if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) {
if (val.isvalid) {
// do whatever you want for invalid controls
$(''#'' + val.controltovalidate).parents(''.control-group:first'').removeClass(''error'');
} else {
// reset invalid controls so they display as valid
//$(''#'' + val.controltovalidate).parents(''.control-group:first'').addClass(''error'');
var t = $(''#'' + val.controltovalidate).parents(''.control-group:first'');
t.addClass(''error'');
}
}
}
function NicerValidatorValidate(val, validationGroup, event) {
AspValidatorValidating = validationGroup;
AspValidatorValidate(val, validationGroup, event);
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);
Muy tarde para la fiesta, pero en caso de que alguien más se tope con esto y quiera una respuesta completa que funcione con Bootstrap, tomé todos los ejemplos anteriores e hice una versión que funcionará con múltiples validadores conectados a un solo control, y trabajará con grupos de validación:
<script>
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
AspValidatorValidate = ValidatorValidate;
ValidatorValidate = NicerValidatorValidate;
// Remove the error class on each control group before validating
// Store a reference to the ClientValidate function
var origValidate = Page_ClientValidate;
// Override with our custom version
Page_ClientValidate = function (validationGroup) {
// Clear all the validation classes for this validation group
for (var i = 0; i < Page_Validators.length; i++) {
if ((typeof(Page_Validators[i].validationGroup) == ''undefined'' && !validationGroup) ||
Page_Validators[i].validationGroup == validationGroup) {
$("#" + Page_Validators[i].controltovalidate).parents(''.form-group'').each(function () {
$(this).removeClass(''has-error'');
});
}
}
// Call the original function
origValidate(validationGroup);
};
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties ''isvalid'' (bool) and
* ''controltovalidate'' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
// IF we should be paying any attention to this validator at all
if ((typeof (val.enabled) == "undefined" || val.enabled != false) && IsValidationGroupMatch(val, AspValidatorValidating)) {
if (!val.isvalid) {
// Set css class for invalid controls
var t = $(''#'' + val.controltovalidate).parents(''.form-group:first'');
t.addClass(''has-error'');
}
}
}
function NicerValidatorValidate(val, validationGroup, event) {
AspValidatorValidating = validationGroup;
AspValidatorValidate(val, validationGroup, event);
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(function () {
UpgradeASPNETValidation();
});
</script>
No es exactamente sin los controles de cambio que usaba el usuario, pero creo que de esta manera es más fácil (sin escribir el ejemplo completo, creo que no es necesario):
ASP.NET:
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<asp:CustomValidator runat="server" ControlToValidate="TextBox1" Display="Dynamic" Text="TextBox1 Not Set" ValidateEmptyText="true" OnServerValidate="ServerValidate" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Execute" />
Código:
protected void Execute(object sender, EventArgs e)
{
Page.Validate();
if (Page.IsValid)
{
*some code*
}
}
protected void ServerValidate(object source, ServerValidateEventArgs args)
{
CustomValidator cval = source as CustomValidator;
if (cval == null)
{
args.IsValid = false;
return;
}
if (string.IsNullOrEmpty(args.Value))
{
args.IsValid = false;
string _target = cval.ControlToValidate;
TextBox tb = cval.Parent.FindControl(_target) as TextBox;
tb.BorderColor = System.Drawing.Color.Red;
}
else
{
args.IsValid = true;
}
}
Otra posibilidad ... este código da un borde rojo (o lo que sea que ponga dentro de la clase CSS) al control para validar (funciona para listas desplegables y cuadros de texto, pero puede ampliarse para botones, etc.)
En primer lugar, utilizo CustomValidator en lugar de RequiredFieldValidator, porque entonces puede usar ClientValidationFunction del CustomValidator para cambiar el CSS del control a validar.
Por ejemplo: cambie el borde de un cuadro de texto MyTextBox cuando un usuario se olvidó de completarlo. El CustomValidator para el control MyTextBox se vería así:
<asp:CustomValidator ID="CustomValidatorMyTextBox" runat="server" ErrorMessage=""
Display="None" ClientValidationFunction="ValidateInput"
ControlToValidate="MyTextBox" ValidateEmptyText="true"
ValidationGroup="MyValidationGroup">
</asp:CustomValidator>
O también podría funcionar para una lista desplegable en la que se requiere una selección. CustomValidator se vería igual que arriba, pero con ControlToValidate apuntando a la lista desplegable.
Para el script del lado del cliente, use JQuery. El método ValidateInput se vería así:
<script type="text/javascript">
function ValidateInput(source, args)
{
var controlName = source.controltovalidate;
var control = $(''#'' + controlName);
if (control.is(''input:text'')) {
if (control.val() == "") {
control.addClass("validation");
args.IsValid = false;
}
else {
control.removeClass("validation");
args.IsValid = true;
}
}
else if (control.is(''select'')) {
if (control.val() == "-1"[*] ) {
control.addClass("validation");
args.IsValid = false;
}
else {
control.removeClass("validation");
args.IsValid = true;
}
}
}
</script>
La clase "validación" es una clase CSS que contiene el marcado cuando se dispara el validador. Podría verse así:
.validation { border: solid 2px red; }
PD: para que el color del borde funcione para la lista desplegable en IE, agregue la siguiente metaetiqueta al encabezado de la página: <meta http-equiv="X-UA-Compatible" content="IE=edge" /> .
[*] Esto es lo mismo que el "Valor Inicial" de un Valor de Campo Requerido. Este es el elemento que se selecciona como predeterminado cuando el usuario aún no ha seleccionado nada.
Puede anular fácilmente la función javascript de ASP.NET que actualiza la visualización de los campos validados. Esta es una buena opción ya que puede mantener sus Validadores de campo existentes, y no tiene que escribir ninguna lógica de validación personalizada ni buscar los campos para validar. En el siguiente ejemplo, agrego / elimino una clase ''error'' del elemento padre que tiene la clase ''control-group'' (porque estoy usando twitter bootstrap css ):
/**
* Re-assigns the ASP.NET validation JS function to
* provide a more flexible approach
*/
function UpgradeASPNETValidation() {
if (typeof (Page_ClientValidate) != "undefined") {
AspValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = NicerValidatorUpdateDisplay;
}
}
/**
* This function is called once for each Field Validator, passing in the
* Field Validator span, which has helpful properties ''isvalid'' (bool) and
* ''controltovalidate'' (string = id of the input field to validate).
*/
function NicerValidatorUpdateDisplay(val) {
// Do the default asp.net display of validation errors (remove if you want)
AspValidatorUpdateDisplay(val);
// Add our custom display of validation errors
if (val.isvalid) {
// do whatever you want for invalid controls
$(''#'' + val.controltovalidate).closest(''.control-group'').removeClass(''error'');
} else {
// reset invalid controls so they display as valid
$(''#'' + val.controltovalidate).closest(''.control-group'').addClass(''error'');
}
}
// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);
Esto se adapta muy levemente desde here y con información útil de these articles .
Puede usar CustomValidator en lugar de RequiredFieldValidator:
.ASPX
<asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage=""
ControlToValidate="TextBox1" ClientValidationFunction="ValidateTextBox"
OnServerValidate="CustomValidator1_ServerValidate"
ValidateEmptyText="True"></asp:CustomValidator>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
function ValidateTextBox(source, args)
{
var is_valid = $("#TextBox1").val() != "";
$("#TextBox1").css("background-color", is_valid ? "white" : "red");
args.IsValid = is_valid;
}
</script>
.CS
protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)
{
bool is_valid = TextBox1.Text != "";
TextBox1.BackColor = is_valid ? Color.White : Color.Red;
args.IsValid = is_valid;
}
La lógica de las funciones de validación del cliente y del servidor es la misma, pero la función del cliente utiliza jQuery para acceder al valor del cuadro de texto y modificar su color de fondo.
Sé que esto es viejo, pero tengo otra combinación modificada de Dillie-O y Alexander. Utiliza jQuery con el evento blur para eliminar el estilo cuando la validación tiene éxito.
function validateFields() {
try {
var count = 0;
var hasFocus = false;
for (var i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl = document.getElementById(val.controltovalidate);
validateField(ctrl, val);
if (!val.isvalid) { count++; }
if (!val.isvalid && hasFocus === false) {
ctrl.focus(); hasFocus = true;
}
}
if (count == 0) {
hasFocus = false;
}
}
catch (err) { }
}
function validateField(ctrl, val)
{
$(ctrl).blur(function () { validateField(ctrl, val); });
if (ctrl != null && $(ctrl).is('':disabled'') == false) { // && ctrl.style != null
val.isvalid ? $(ctrl).removeClass("error") : $(ctrl).addClass("error");
}
if ($(ctrl).hasClass(''rdfd_'') == true) { //This is a RadNumericTextBox
var rtxt = document.getElementById(val.controltovalidate + ''_text'');
val.isvalid ? $(rtxt).removeClass("error") : $(rtxt).addClass("error");
}
}
También me gustó la respuesta de Alexanders y Steves, pero quería lo mismo que en el código subyacente. Creo que este código podría hacerlo, pero depende de tu configuración. Mis controles están dentro de un marcador de contenido.
protected void cvPhone_ServerValidate(object source, ServerValidateEventArgs args)
{
bool is_valid = !string.IsNullOrEmpty(args.Value);
string control = ((CustomValidator)source).ControlToValidate;
((TextBox)this.Master.FindControl("ContentBody").FindControl(control)).CssClass = is_valid ? string.Empty : "inputError";
args.IsValid = is_valid;
}
Tuve que hacer algunos cambios en la sugerencia de Steve de que la mina funcionara,
function ValidateTextBox(source, args) {
var controlId = document.getElementById(source.controltovalidate).id;
var control = $("#" + controlId);
var value = control.val();
var is_valid = value != "";
is_valid ? control.removeClass("error") : control.addClass("error");
args.IsValid = is_valid;
}
buen ejemplo, exactamente lo que necesitaba.
en css:
.form-control
{
width: 100px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: black;
background-color: white;
}
.form-control-Error
{
width: 100px;
height: 34px;
padding: 6px 12px;
font-size: 14px;
color: #EBB8C4;
background-color: #F9F2F4
border: 1px solid #DB7791;
border-radius: 4px;
}
en tu página:
<asp:TextBox ID="txtUserName" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidatorrunat="server"Display="Dynamic" ErrorMessage="PLease Enter UserName" ControlToValidate="txtUserName"></asp:RequiredFieldValidator>
al final de su página de arriba
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
for (var i in Page_Validators) {
try {
var control = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid) {
control.className = "form-control-Error";
} else {
control.className = "form-control";
}
} catch (e) { }
}
return false;
}
return true;
}
</script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Custemvalidatin.aspx.cs" Inherits="AspDotNetPractice.Custemvalidatin" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function vali(source, args) {
if (document.getElementById(source.controltovalidate).value.length > 0) {
args.IsValid = true;
document.getElementById(source.controltovalidate).style.borderColor = ''green'';
}
else {
args.IsValid = false;
document.getElementById(source.controltovalidate).style.borderColor = ''red'';
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" Style="border:1px solid gray; width:270px; height:24px ; border-radius:6px;" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="Enter First Name" SetFocusOnError="True" Display="Dynamic" ClientValidationFunction="vali"
ValidateEmptyText="True" Font-Size="Small" ForeColor="Red">Enter First Name</asp:CustomValidator><br /><br /><br />
<asp:TextBox ID="TextBox2" Style="border:1px solid gray; width:270px; height:24px ; border-radius:6px;" runat="server"></asp:TextBox>
<asp:CustomValidator ID="CustomValidator2" runat="server" ClientValidationFunction="vali"
ControlToValidate="TextBox2" Display="Dynamic" ErrorMessage="Enter Second Name"
SetFocusOnError="True" ValidateEmptyText="True" Font-Size="Small" ForeColor="Red">Enter Second Name</asp:CustomValidator><br />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
</html>