Name Validation Using jQuery

Name Validation Using jQuery

byRAYS CODING -
0

With this article, I am starting a series on form validation. In this validation series, I will give information about implementing validation using jQuery. But before understanding validation, I will tell you what validation is, why validation is necessary and what are the scenarios of validation of those input fields which are used a lot in the form.

jQuery Validation

We know that there are different types of input boxes in a form, and there are different scenarios to validate each input box. In this article, I will give you information about “Name Validation” as well as all these scenarios.

What is validation

Form validation is a technique in which the user's input is checked when he submits the form. This validation ensures that the data entered by the user is correct, complete, and in the expected format.

Why need for validation

Validation of input fields in a form is important to check whether the input data provided by the user is in the correct format and whether the user has entered input in the required fields.

Another example is that if the length or complexity of the password in the form is not validated, the user may enter a weak password, which may lead to security vulnerabilities. Suppose the system automatically checks that the password is of minimum length and also contains numbers, uppercase letters, and special characters. In that case, it improves the safety of the form and the user experience. In this way, form validation ensures data consistency and improves security.

Validation Scenarios

There are different types of validation in a form like "text", "email", "select", "radio button" etc. and there is different validation for each input box.

Text Type: This type of input box is used for names like user name, company name, etc and there are different scenarios for each name but mostly the scenarios are the same only there are some changes in the conditions. The differences in this type of scenario can be as follows.
  1. Input box contains the value or not (required).
  2. Length of the value.
  3. The name should contain alphabetic characters, no numeric values ​​or special characters.
Email Type: This type of input box is used to validate the user's email. Its scenarios can be as follows.
  1. The email field is not empty (required field)
  2. The email format is valid
Number Type: This type of input box is used to validate the user's phone, age, or other numeric values ​​like zip code. Its scenarios can be as follows.
  1. Value exists or not (required field)
  2. Value length (minimum and maximum length)
  3. No alphabetic characters or special characters
  4. Invalid number (contains alphabetic or special characters):
  5. Decimal and integer validation

Radio Types: There are some common cases in radio button validation scenarios that are checked during form submission.
  1. Mandatory Selection: The user must select the radio button.

Checkboxes: There are some common scenarios for checkbox validation that are checked while submitting a form.
  1. Mandatory selection (at least one checkbox)
  2. Maximum/minimum selection limits
Date: Date validation scenarios play an important role in form inputs to ensure that the user has entered a valid and correct date. Here are some common date validation scenarios:
  1. Mandatory date field
  2. Invalid date format
Password: There can be different validation scenarios for password input fields.
  1. Minimum length validation
  2. Maximum length validation
  3. Password strength validation
  4. Blanks validation
  5. Pattern matching (regular expression)
tel type: The "tel" type is used to collect phone numbers. The phone number validation process follows some specific rules that depend on regional formats and use cases. Here are some common validation scenarios that you can use for the <input type="tel"> field.
  1. Required Field Validation
  2. Valid Phone Number Format (Specific to Country):
  3. Phone Number Length Validation
File: HTML <input type="file"> element ka use file upload karne ke liye hota hai. Agar aapko file input pe validation apply karna hai, to aapko kuch cheezein dhyaan me rakhni padti hain jaise file ka type, size, aur number of files.
  1. Required Field Validation
  2. File Type Validation
  3. File Size Validation
  4. Multiple Files Upload Validation
  5. Validating the Number of Files
URL Type:- This type of input field is used to enter a URL in the form.
  1. Required Field Validation
  2. Formate validate
Note:- These validations can be changed the requirement.

Name Validation

In this validation, you can validate the "name" with three scenarios. 
  1. The field is required
  2. Min and Max length
  3. Regex validation


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RAYS CODING : Name Validation</title>
        <link rel="stylesheet" href="../style.css">
        <script src="https://cdn.tailwindcss.com"></script>
    </head>
    <body class="bg-zinc-950 flex justify-center">
        <section class="w-auto h-auto mt-28 bg-white">
            <header class="bg-violet-600 p-5 pl-6 pr-6">
                <h2 class="text-3xl text-white tracking-wider">RAYS CODING : jQuery Name Validation</h2>
            </header>
            <form action="#" method="post" class="p-5">
                <input type="text" id="username"
                    class="w-full h-12 p-3 border-2 border-violet-600 focus:outline-none focus:border-violet-600 hover:border-violet-600"
                    placeholder="Enter Your Name">
                <div class="mt-5 bg-red-300 p-3 text-red-950 hidden" id="error-message"></div>
                <button type="submit" class="mt-5 bg-violet-600 p-3 w-full text-white font-semibold  tracking-wider"
                    id="submit-button">SUBMIT</button>
            </form>
        </section>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
            integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </body>
    </html>
         


This is the code of a simple HTML form, which has a text input field and a submit button. Can jQuery be used for name validation in the form. The structure of the form code will look something like this:

jQuery validation

This form has a username input field and a submit button. If the user does not enter the correct name then an error message will be shown.

Validation in jQuery



    <script>
        $(document).ready(function () {
            $('#submit-button').on('click', function (e) {
                e.preventDefault();
                let input_val = $('#username').val();
                let name_regexp = /^[a-zA-Z\s]+$/;
                if (input_val === '') {
                    $('#error-message').removeClass('hidden').text('Please enter your name, name field is required.').fadeIn().delay(3000).fadeOut(function () {
                        $(this).addClass('hidden');
                        return false;
                    });
                } else if (input_val.length < 3) {
                    $('#error-message').removeClass('hidden').text('Name must be at least 3 characters long. Please enter a valid name.').fadeIn().delay(3000).fadeOut(function () {
                        $(this).addClass('hidden');
                        return false;
                    });
                } else if (input_val.length > 50) {
                    $('#error-message').removeClass('hidden').text('Name cannot be more than 50 characters. Please shorten your name.').fadeIn().delay(3000).fadeOut(function () {
                        $(this).addClass('hidden');
                        return false;
                    });
                } else if (!input_val.match(name_regexp)) {
                    $('#error-message').removeClass('hidden').text('Please enter a valid name. Only alphabetic characters and spaces are allowed.').fadeIn().delay(3000).fadeOut(function () {
                        $(this).addClass('hidden');
                        return false;
                    });
                } else {
                    $('#error-message').text(input_val).removeClass('hidden bg-red-300 text-red-950').addClass('bg-green-300 text-green-950').fadeIn().delay(3000).fadeOut(function () { $(this).addClass('hidden'); return true; });
                }
            });
        });
    </script>
         


Explanation of jQuery Validation code

In this jQuery validation code, the validation code is executed on the button click event.

Required Fields:- When the user clicks on the “Submit” button, then as per the first condition if there are no values ​​then the error message is displayed in an error box

Minimum Length:- When the user clicks on the “Submit” button, then as per the second condition if there are values ​​but the name length is less than three characters then the error message will be shown.

Maximum Length:- When a user clicks on the “Submit” button, then as per the third condition if there are values ​​but the name length is more than fifty characters then the error message will be shown.

Alphabetic Characters:- When the user clicks on the “Submit” button, then as per the fourth condition if there are values ​​but the name also has a numeric value then the error message will be shown.

If all the conditions are false then else condition will be executed.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement