Styling of ASP validation - RequiredFieldValidator & RegularExpressionValidator

Question

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: https://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.

Well, usually you don't need both RequiredFieldValidator and RegularExpressionValidator for same field. — Dmitry Zaets, Jul 15 '14 at 12:54
I have to validate 1. whether the field is empty or not and 2. whether the text is valid. — Christian Knudsen, Jul 15 '14 at 13:03
But if i remove "RequiredFieldValidator", the user won't get an error message, if the input field is empty... — Christian Knudsen, Jul 15 '14 at 13:08

Christian Knudsen · Accepted Answer · 2016-11-04T08:08:35.453

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

Styling of ASP validation - RequiredFieldValidator & RegularExpressionValidator

1 Answers1