Email Validation Using jQuery

Email Validation Using jQuery

In this second article of jQuery validation series, I will tell you about email validation. In this email validation article, I will also look at the basic scenarios of jQuery validation.

jQuery Validation

Need of the Email validation:

The email field is a crucial element of any registration or login form, and it is essential to ensure its accuracy. If the user enters a name or other invalid information in this field, that information may be saved in the system without proper validation. Thus, it may not only affect the user experience but also put the data integrity of the system at risk.

Example: Suppose a user enters the following information in the registration form:
Name: Jhon Deo
Email: jhondeo

It is obvious that "jhondeo" is not a valid email address, but if the system has not implemented proper email validation, this information will be saved in the database, which may later cause problems such as inconvenience in login or password recovery.

Validation Scenario

Mandatory field:- In this validator, it is validated whether there is a value in the email input box or not.
Valid Email:- In this validator it is checked whether the email is valid or not with the help of a regex pattern.

Email Validation code


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>RAYS CODING : Email 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 Email Validation</h2>
            </header>
            <form action="#" method="post" class="p-5">
                <input type="Email" id="useremail" 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>
                 


jQuery validation

This code creates a simple web page with an email input field. When the user enters his email and presses the Submit button, the email is validated. If the email is in the wrong format, an error message is shown. If the email is correct, a success message is shown.

There is an input field on the page where the user can enter his email address. Tailwind CSS has been used so that the page looks good and is responsive (meaning it looks good on both mobile and desktop). The format of the email is checked using jQuery and if it is wrong, a friendly error message is shown to the user.

jQuery Validation

     
    <script>
        $(document).ready(function () {
            $('#submit-button').on('click', function (e) {
                e.preventDefault();
                let input_val = $('#useremail').val();
                let email_regexp = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                if (input_val === '') {
                    $('#error-message').removeClass('hidden').text('Email address is required. Please provide a valid email address to proceed.').fadeIn().delay(3000).fadeOut(function () {
                        $(this).addClass('hidden');
                        return false;
                    });
                } else if (!input_val.match(email_regexp)) {
                    $('#error-message').removeClass('hidden').text('The email address you entered seems to be invalid. Please check the format and try again.').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>
         


jQuery validation

This code creates an email validation system using jQuery. When the user clicks the Submit button, the code first checks whether the email field is empty or not. If it is empty, an error message is shown which says "Email address is required. Please provide a valid email address to proceed." This message will appear on the screen for 3 seconds and then disappear.

If the email is not empty, then the code checks whether the email entered is in the correct format or not. For this, a regular expression (email_regexp) has been used which validates the email address. If the email format is incorrect, the user is shown another error message: "The email address you entered seems to be invalid. Please check the format and try again."

If the email is in a valid format, a success message is displayed stating that the email is correct. The success message is displayed with a green background and is automatically hidden after 3 seconds. In this way, the code validates the email address and gives feedback to the user.

jQuery validation

Conclusion

The main work of this code is to check the email address provided by the user. If the email is in the wrong format or the field is empty, then an error message is shown to the user. If the email is in the correct format, then a success message is shown. This code validates the email in a simple and user-friendly way, so that the user can get feedback on correct input.

Post a Comment

Previous Post Next Post

Recent in Technology