CODEWITHSUNDEEP
javascriptasp.net
weirdgyn
weirdgyn

Reputation: 988

Avoid duplicated error messages with ASP.NET CustomValidator

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

Upvotes: 0

Views: 493

Answers (1)

Martin Parenteau
Martin Parenteau

Reputation: 73761

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

Upvotes: 1

Related Questions