Christian Knudsen Christian Knudsen - 1 month ago 6
jQuery Question

Styling of ASP validation - RequiredFieldValidator & RegularExpressionValidator

I'm struggling with a ASP form and to make it clear from the start, I'm new to ASP.Net.

The thing is that I want to style input tags, when they are filled wrong.
I used this code: http://stackoverflow.com/a/11954218/3840831
and it looks like this for me:

/**
* 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('.form-group').removeClass('has-error has-feedback');
} else if(!val.isvalid) {
// reset invalid controls so they display as valid
$('#' + val.controltovalidate).closest('.form-group').addClass('has-error has-feedback');
}
}

// Call UpgradeASPNETValidation after the page has loaded so that it
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);


and it worked fine, BUT....
At some of my inputs i have both "RequiredFieldValidator" & "RegularExpressionValidator" like this:

<div class="form-group">
<label class="col-sm-4 control-label">
Telefon (8 cifre, uden mellemrum)
</label>
<div class="col-sm-8">
<asp:TextBox ID="TxtPhone" CssClass="form-control" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ErrorMessage="Ugyldigt telefon-format" Text="*" ControlToValidate="TxtPhone" SetFocusOnError="true" ValidationExpression="^(\d\d\d\d\d\d\d\d)$"><span class="glyphicon glyphicon-remove form-control-feedback"></span></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="RequiredFieldValidator6" runat="server" ErrorMessage="Udfyld venligst telefon" Text="*" ControlToValidate="TxtPhone"><span class="glyphicon glyphicon-remove form-control-feedback"></span></asp:RequiredFieldValidator>
</div>
</div>


The problem arises when JQuery have to figure out whether it is "RegularExpressionValidator" or "RequiredFieldValidator" that is false.
Let me now if I'm missing any information.

Answer

I found a solution that looks like this:

/**
* 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);

    $('.form-group').each(function () {
        var errors = $(this).find('.error:not(:hidden)').length;
        if (errors > 0) {
            $(this).addClass('has-error has-feedback');
        } else {
            $(this).removeClass('has-error has-feedback');
        }
    });
};


// Call UpgradeASPNETValidation after the page has loaded so that it 
// runs after the standard ASP.NET scripts.
$(document).ready(UpgradeASPNETValidation);
Comments