In my NIC textbox I am trying to do validation where the first letter of the NIC text value need to be the same as the first letter of the last name text value.

Last Name Textbox

 <div class="form-group row justify-content-center mt-2">
            <asp:Label ID="lblLName" CssClass="col-md-2 col-form-label" runat="server" Text="Last Name"></asp:Label>
            <div class="col-md-4">
                <asp:TextBox ID="txtLName" CssClass="form-control" runat="server"></asp:TextBox>
                <asp:RegularExpressionValidator ID="revLname"
                    runat="server"
                    Display="Dynamic"
                    ForeColor="Red"
                    ControlToValidate="txtLName"
                    ValidationExpression="([A-Z][a-z] )$"
                    SetFocusOnError="true"
                    ErrorMessage="Invalid Fname"></asp:RegularExpressionValidator>
                <asp:RequiredFieldValidator
                    ID="rfvLname"
                    runat="server"
                    Display="Dynamic"
                    ForeColor="Red"
                    ControlToValidate="txtLName"
                    SetFocusOnError="true"
                    ErrorMessage="Last Name is Mandatory"></asp:RequiredFieldValidator>
            </div>
        </div>

NIC textbox

 <div class="form-group row justify-content-center mt-2">
            <asp:Label ID="lblNic" CssClass="col-md-2 col-form-label" runat="server" Text="NIC"></asp:Label>
            <div class="col-md-4">
                <asp:TextBox ID="txtNIC" CssClass="form-control" runat="server"></asp:TextBox>
                <asp:RequiredFieldValidator
                    ID="rfvNic"
                    runat="server"
                    Display="Dynamic"
                    ForeColor="Red"
                    ControlToValidate="txtNIC"
                    SetFocusOnError="true"
                    ErrorMessage="NIC is Mandatory"></asp:RequiredFieldValidator>
                  <asp:CustomValidator
                    ID="cvNic"
                    runat="server"
                    OnServerValidate="cvNic_ServerValidate"
                    ClientValidationFunction="validateLength"
                    Display="Dynamic"
                    ForeColor="Red"
                    ControlToValidate="txtNIC"
                    SetFocusOnError="true"
                    ErrorMessage="Invalid NIC"></asp:CustomValidator>
                <asp:RegularExpressionValidator
                    ID="revNic"
                    runat="server"
                    ValidationExpression="^[a-zA-Z0-9\s]{14}$"
                    Display="Dynamic"
                    ForeColor="Red"
                    ControlToValidate="txtNIC"
                    SetFocusOnError="true"
                    ErrorMessage="Must contain 14 characters"></asp:RegularExpressionValidator>
          </div>
        </div>

I made a Custom Validation server and client side:

server Side

protected void cvNic_ServerValidate(object source, ServerValidateEventArgs args)
    {
        if (txtLName.Text != string.Empty)
        {
            String lletter = txtLName.Text.ToLower();
            string firstletter = lletter[0].ToString();
            String nic = txtNIC.Text.ToLower();
            String nfletter = nic[0].ToString();
            if (nfletter != firstletter)
            {
                args.IsValid = false;
            }
        }
    }

Client Side

  function validateLength(sender, args) {
        
        var LastName = document.getElementById['txtLName'].value;
        var Nic = document.getElementById['txtNIC'].value;
       
        if (LastName !== null || LastName !== '') {
            var lletter = LastName.toLowerCase;
            var firstletter = lletter.substr(1, 1);

            var nic = Nic.toLowerCase;
            var nfletter = nic.substr(1, 1);

            if (nfletter != firstletter) {
                return args.IsValid = false;
              
            }
        }
    

I have made a condition that in order for this validation to occur, it should verify if the last name textbox is not empty then if it is, it extract both textbox first letters and compare it in a if statement.

The problem is when I click submit the validation of the client side is not functioning and for the server side ,the validation is functioning after the data has been send. How can I tackle this please?

CodePudding user response：

I would use a CustomValidator for this that checks if txtLName is not empty and then compares the first letters. PS to get the first letter with substr you need to start at index 0.

<asp:CustomValidator runat="server" ID="CustomCompareValidator" 
    ClientValidationFunction="CustomCompareValidator" 
    ErrorMessage="The first letters should match"></asp:CustomValidator>

The javascript

<script>
    function CustomCompareValidator(source, args) {
        var $txtNIC = $('#<%= txtNIC.ClientID %>');
        var $txtLName = $('#<%= txtLName.ClientID %>');
        // or use $('#txtNIC') & $('#txtLName') is you want to use the script
        // in a separate js file

        //check if lastname is not empty
        if ($txtLName.val() !== '') {

            //check if the first letters match
            if ($txtLName.val().substr(0, 1) !== $txtNIC.val().substr(0, 1)) {
                args.IsValid = false;
                return;
            }
        }

        args.IsValid = true;
    }
</script>