Server validation doesn't trigger after client validation

Question

I'm at a loss here. Constantly I'm seeing the same answers to my problem, but none of them solve it for me.

I have a textbox that accepts email as input. If a user inputs a valid email, then I want to enable a button which will lead them to the next step.

The problem is I can see the client validation function get called, but not the server one. Actually after the client function finishes, I don't see Page_Load being called either.

Here is the code.

HTML:

<asp:TextBox ID="txtScreenSingleSignOnEmailText" runat="server" CssClass="w-100 mb-5 text-input" type="email"></asp:TextBox>
<asp:CustomValidator runat="server" ID="CustomValidatorEmail" ErrorMessage="<%$Resources: PleaseSupplyValidEmailAddress %>" ValidationGroup="valgroupScreenSingleSignOn" ClientValidationFunction="checkvalidEmail" CssClass="error" ControlToValidate="txtScreenSingleSignOnEmailText"
  ValidateEmptyText="True" OnServerValidate="checkvalidEmail_ServerValidate" Display="Dynamic" />

<asp:Button runat="server" ID="btnCompatibleScreenSingleSignOnContinue" Text="<%$Resources: NDESConnect %>"
OnClick="BtnScreenSingleSignOnContinueClick" ValidationGroup="valgroupScreenSingleSignOn" CssClass="action-button" />

Js:

function checkvalidEmail(sender, e) {
    var isValid = true;
    isValid = (/[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})/g).test(e.Value.toLowerCase());
    if (isValid && (e.Value.indexOf('<') > -1 || e.Value.indexOf('>') > -1)) {
        isValid = false;
    }
    console.log({ isValid, value: e.Value, val: e.value });

    e.IsValid = isValid;
    return e;
}

CS:

protected void checkvalidEmail_ServerValidate(object sender, ServerValidateEventArgs e)
{
    Validate();
    try
    {
        var addr = new System.Net.Mail.MailAddress(e.Value.ToLower());
        e.IsValid = true;
        btnCompatibleScreenSingleSignOnContinue.Enabled = true;
    }
    catch(Exception exc)
    {
        e.IsValid = false;
        btnCompatibleScreenSingleSignOnContinue.Enabled = false;
    }

}

Any advice?

Answer 1

To disable the button at client side, first add a clientidmode="static" property to the button, so its id in clientside is same as serverside:

<asp: Button runat="server" ID="btnCompatibleScreenSingleSignOnContinue" 
    clientidmode="static" 
    Text="<%$Resources: NDESConnect %>"
    OnClick="BtnScreenSingleSignOnContinueClick"
    ValidationGroup="valgroupScreenSingleSignOn" 
    CssClass="action-button" />

Now you can disable/enable it in checkvalidEmail function:

function checkvalidEmail(sender, e) {
    var isValid = true;
    isValid = (/[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})/g).test(e.Value.toLowerCase());
    if (isValid && (e.Value.indexOf('<') > -1 || e.Value.indexOf('>') > -1)) {
                isValid = false;
            }
    console.log({ isValid, value: e.Value, val: e.Value });
    e.IsValid = isValid;
    document.getelementbyid("btnCompatibleScreenSingleSignOnContinue").disabled = !isValid;
    return e;
}

Also, the last e.value at the consol.log line should be corrected to e.Value .