When it comes to web form validation, especially for sensitive information like email addresses and mobile numbers, ensuring that the data entered by users is valid and properly formatted is essential. Client-side validation helps reduce errors and enhances the user experience by providing immediate feedback.

In this article, we’ll break down how to implement comprehensive email and mobile number validation using jQuery. The provided solution validates both email formats and mobile number formats, with added checks for things like sequential digits, keyboard patterns, and repeated characters. Let’s walk through the code and its functionality.

Key Features of the Solution

  1. Mobile Number Validation

    • The number must be exactly 10 digits.

    • The number must start with a digit between 7 and 9.

    • Disallows numbers with identical digits (e.g., 1111111111).

    • Disallows ascending or descending sequences (e.g., 1234567890, 0987654321).

  2. Email Validation

  3. Dynamic Form Validation

    • The form is validated when the user interacts with the form fields (via change events).

    • Provides immediate feedback during user input (via onblur, onchange, and onkeypress events).

    • The form only submits if both the email and mobile number fields are valid.

Understanding the Code

Here is the full JavaScript solution that performs the validation logic on both email and mobile number fields.

Step 1: jQuery Document Ready

$(document).ready(function () {
    // Use 'change' event for validation
    $("#<%= txtemail1.ClientID %>").change(function () {
        validateEmail(this);
    });

    $("#<%= txtcontactno1.ClientID %>").change(function () {
        validateMobile(this);
    });

    // Handle form submission validation
    $("#<%= btnsignup1.ClientID %>").click(function () {
        return validateForm();
    });
    $("#<%= EMaildId.ClientID %>").change(function () {
        validateEmail(this);
    });

    $("#<%= MobileID.ClientID %>").change(function () {
        validateMobile(this);
    });

    // Handle form submission validation for feedback form
    $("#<%= SubmitFeeId.ClientID %>").click(function () {
        return validateFeedbackForm();
    });
});

Step 2: Mobile Number Validation

function validateMobile(input) {
    var value = input.value.trim();
    $(input).removeClass("abc1");

    // Skip validation if field is empty
    if (value === "") return true;

    // Must be exactly 10 digits
    if (!/^\d{10}$/.test(value)) {
        alert("Mobile number must be exactly 10 digits.");
        $(input).addClass("abc1");
        return false;
    }

    // Must start with 7, 8, or 9
    if (!/^[7-9]/.test(value)) {
        alert("Invalid mobile number. It should start with a digit from 7 to 9.");
        $(input).addClass("abc1");
        return false;
    }

    // All digits the same are not allowed
    if (/^(\d)\1{9}$/.test(value)) {
        alert("Invalid mobile number. All digits cannot be the same.");
        $(input).addClass("abc1");
        return false;
    }

    // Block full ascending or descending sequence
    if (value === "1234567890" || value === "0987654321") {
        alert("Invalid mobile number. Sequential digits not allowed.");
        $(input).addClass("abc1");
        return false;
    }

    return true;
}

Step 3: Email Validation

function validateEmail(input) {
    var value = input.value.trim().toLowerCase();
    $(input).removeClass("abc1");

    // Skip validation if the field is empty
    if (value === "") return true;

    var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!emailRegex.test(value)) {
        alert("Please enter a valid email address.");
        $(input).addClass("abc1");
        return false;
    }

    var localPart = value.split('@')[0];

    // Check for repeated characters
    if (/^(.)\1+$/.test(localPart)) {
        alert("Invalid email. Repeated characters not allowed.");
        $(input).addClass("abc1");
        return false;
    }

    // Check for sequential letters
    for (var i = 0; i <= localPart.length - 3; i++) {
        var c1 = localPart.charCodeAt(i);
        var c2 = localPart.charCodeAt(i + 1);
        var c3 = localPart.charCodeAt(i + 2);

        if ((c2 === c1 + 1 && c3 === c2 + 1) ||  // ascending
            (c2 === c1 - 1 && c3 === c2 - 1)) {  // descending
            alert("Invalid email. Sequential letters not allowed.");
            $(input).addClass("abc1");
            return false;
        }
    }

    // Additional checks for repeated patterns and keyboard patterns
    for (var subLen = 2; subLen <= 4; subLen++) {
        for (var i = 0; i <= localPart.length - subLen * 2; i++) {
            var pattern = localPart.substr(i, subLen);
            var nextPattern = localPart.substr(i + subLen, subLen);
            if (pattern === nextPattern) {
                alert("Invalid email. Repeating patterns not allowed.");
                $(input).addClass("abc1");
                return false;
            }
        }
    }

    var repeatCount = 1;
    for (var i = 1; i < localPart.length; i++) {
        if (localPart[i] === localPart[i - 1]) repeatCount++;
        else repeatCount = 1;

        if (repeatCount >= 4) {
            alert("Invalid email. Too many repeated characters.");
            $(input).addClass("abc1");
            return false;
        }
    }

    var keyboards = ["qwertyuiop", "asdfghjkl", "zxcvbnm", "poiuytrewq", "mnbvcxz", "lkjhgfds"];
    for (var k = 0; k < keyboards.length; k++) {
        var seq = keyboards[k];
        if (localPart.includes(seq) || localPart.includes(seq.split("").reverse().join(""))) {
            alert("Invalid email. Keyboard pattern detected.");
            $(input).addClass("abc1");
            return false;
        }
    }

    $(input).removeClass("abc1");
    return true;
}

Step 4: Form Validation Before Submission

function validateForm() {
    var isValid = validateEmail($("#<%= txtemail1.ClientID %>")[0]) &&
        validateMobile($("#<%= txtcontactno1.ClientID %>")[0]);
    return isValid;
}

function validateFeedbackForm() {
    var isValid = validateEmail($("#<%= EMaildId.ClientID %>")[0]) &&
validateMobile($("#<%= MobileID.ClientID %>")[0]);
return isValid;
}

Form Submission Validation:

The form will only be submitted if both the email and mobile number are valid. This is achieved by checking both fields and ensuring each returns true for validation.

Conclusion

By using this solution, you ensure that your forms are protected against invalid email addresses and mobile numbers, improving both data quality and user experience. The validation checks are thorough, preventing common pitfalls such as repeated characters, sequential digits, and keyboard patterns. This approach provides immediate feedback to users as they fill out the form, allowing them to correct mistakes before submitting the data.