Avoid duplicated error messages with ASP.NET CustomValidator

Question

I have an ASP.NET page defined in this way:

<asp:TextBox 
    ID="_txtExitDate"
    ClientIDMode="Static"
    runat="server"
    Text='<%#Bind("exit_date","{0:dd/MM/yyyy}")%>'
    placeholder="gg/mm/aaaa" />
<asp:CompareValidator
    runat = "server" 
    Type = "Date" 
    Operator = "DataTypeCheck"
    Display = "Dynamic"
    ControlToValidate = "_txtExitDate" 
    ErrorMessage = "Exit date invalid." 
    SetFocusOnError = "true" />
<asp:CustomValidator 
    Display="Dynamic"
    runat="server" 
    EnableClientScript="true"
    ClientValidationFunction="Validate_Exit"
    ControlToValidate="_txtExitDate" 
    ErrorMessage="Exit date should be minor of today date." />

<asp:TextBox 
    ID="_txtExitTime"
    ClientIDMode="Static"
    CssClass="input_small"
    runat="server"
    Text='<%#Bind("exit_time")%>'
    placeholder="hh:mm" />
<asp:RegularExpressionValidator
    Display = "Dynamic"
    ControlToValidate="_txtExitTime"
    runat="server"
    ErrorMessage="Exit time invalid"
    ValidationExpression="^([01][0-9]|2[0-3]|[1-9]):([0-5][0-9]|[0-9])$"
    SetFocusOnError = "true" />
<asp:CustomValidator 
    Display="Dynamic"
    runat="server" 
    EnableClientScript="true"
    ClientValidationFunction="Validate_Exit"
    ControlToValidate="_txtExitTime" 
    ErrorMessage="Exit date should be minor of today date." />

The Javascript code that evaluates CustomValidators is:

function Validate_Exit(sender, args) {
    var _txtExitDate = $("input[id$='_txtExitDate ']");
    var _txtExitTime = $("input[id$='_txtExitTime ']");

    if (isBlank(_txtExitDate.val()) || isBlank(_txtExitTime.val())) {
        args.IsValid = true;
        return;
    }

    var _sExit = _txtExitDate .val().substring(0, 10) + " " + _txtExitTime.val().substring(0, 5);
    var _exit = moment(_sExit, "DD/MM/YYYY HH:mm:ss");

    if (_exit.isAfter(moment())) {
        args.IsValid = false;
        return;
    }

    args.IsValid = true;
}

The scope of the form is to allow the user to input only valid date/time values. In particular the CustomValidator is intended to allow the input of a couple of combined values that should be minor of the present date-time.

It works as I expect except for a side effect that it's not compromising but it's graphically annoying.

As you can see the CustomValidator is basically the same and it's applied to both textboxes. If the user fails to write a correct date / time combo it show off the message (that's the same message because it's referred to the composed date/time value). In some case the error message is shown 'twice' and this is in part (graphically) horrible but also a little confusing for the user. Is there a way to avoid duplicating this check and to provide a control for both textboxes so the user is not confused by a double error message?

Best regards, Mike

you can show two different messages for exit time and exit date — Akshey Bhat
– Akshey Bhat, Commented May 11, 2016 at 10:14
@AksheyBhat no I cannot ... the custom validator validate the date & time as a whole value to establish if the exit date is valid (i.e. it is not in the future)... showing off diffrerent messages will increase the chance of a misunderstanding. — weirdgyn
– weirdgyn, Commented May 11, 2016 at 10:28

Martin Parenteau · Accepted Answer · 2016-05-11 22:07:14Z

You can use a single CustomValidator to validate both fields. Set the ID of that validator but don't set the ControlToValidate property (here I also set the Text property to show an indicator even when the postback is not triggered):

<asp:CustomValidator 
    ID="cvDateTime"
    Display="Dynamic"
    runat="server" 
    Text="Invalid date!"
    EnableClientScript="true"
    ClientValidationFunction="Validate_Exit"
    ErrorMessage="Exit date should be minor of today date." />

You can set the onchange event handler on both TextBoxes to perform the validation as soon as each field is modified:

<asp:TextBox ID="_txtExitDate" onchange="ValidateOnChange();" ... />
<asp:TextBox ID="_txtExitTime" onchange="ValidateOnChange();" ... />

The validation functions could look like this:

function ValidateOnChange() {
    var validator = document.getElementById('<%= cvDateTime.ClientID %>');
    validator.isvalid = DoValidateDateTime();
    ValidatorUpdateDisplay(validator)
}

function Validate_Exit(source, args) {
    args.IsValid = DoValidateDateTime();
}

function DoValidateDateTime() {
    var _txtExitDate = $("input[id$='_txtExitDate ']");
    var _txtExitTime = $("input[id$='_txtExitTime ']");

    if (isBlank(_txtExitDate.val()) || isBlank(_txtExitTime.val())) {
        return true;
    }

    var _sExit = _txtExitDate .val().substring(0, 10) + " " + _txtExitTime.val().substring(0, 5);
    var _exit = moment(_sExit, "DD/MM/YYYY HH:mm:ss");

    return _exit.isSameOrBefore(moment());
}

Collectives™ on Stack Overflow

Avoid duplicated error messages with ASP.NET CustomValidator

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related