Email Validation Using jQuery

Email Validation Using jQuery

byRAYS CODING -
0
Hello Friends, Today I'll explain to you about "Email Validation Using JQuery". As we know email validation is part of Form Validation. If You are a web designer or web developer It's important for you. So, let's understand "Email validation Using jQuery".

Email Validation Using jQuery main

Step of Name Validation

  1. Create an Email form
  2. Write the Email validation code

Create an Email form

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rays Coding-JQuery Validation</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container mt-5 form_box">
        <div class="row">
            <div class="card p-0">
                <div class="card-header bg-primary">
                    <h3 class="text-center text-white">Rays Coding :- JQuery Form Validation(Email)</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-12">
                            <form action="#" method="post" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3">
                                            <input type="email" name="user_email" class="form-control" id="useremail" placeholder="Enter Your Email" autocomplete="off">
                                            <span id="email_error" class="emailerror"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <button type="submit" class="btn btn-primary mt-4" name="sub_btn" id="sub_button">Submit</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-12 validationtext">
                <h1>jQuery Email Validation</h1>
            </div>
        </div>
    </div>
    <!-- jquery  CDN -->
    <script src="https://code.jquery.com/jquery-3.6.2.slim.min.js" integrity="sha256-E3P3OaTZH+HlEM7f1gdAT3lHAn4nWBZXuYe89DFg2d0=" crossorigin="anonymous"></script>
</body>
</html>

This HTML code represents a webpage designed for validating email input using jQuery. The webpage utilizes Bootstrap for styling and includes a form for users to input their email addresses.

The structure of the webpage is divided into several sections. The main content is enclosed within a container for proper alignment and spacing. Inside the container, there's a card element that acts as a container for the form. This card has a header section with a blue background and a title indicating the purpose of the form, which is "Rays Coding: JQuery Form Validation(Email)".

Within the card body, there's a form with a single input field for the user's email address. The input field is of type "email" to ensure that the entered value follows the email format. Additionally, there's a placeholder text prompting users to enter their email. Beneath the input field, there's an empty span element with an ID of "email_error", presumably meant to display any validation errors related to the email input.

At the bottom of the form, there's a submit button labeled "Submit" to initiate the validation process. The form itself has no action attribute specified, meaning it doesn't submit the data anywhere upon submission.

Below the form, there's a separate section with a heading "jQuery Email Validation", presumably meant for providing additional information or instructions related to email validation using jQuery.

Finally, the webpage includes a link to Bootstrap CSS and a script tag importing jQuery from a Content Delivery Network (CDN), specifically version 3.6.2. This jQuery script will likely be used to implement the email validation functionality, although the actual validation logic is not provided in this code snippet.

Email Validation Using jQuery main

Write the Email validation code

<script>
    $(document).ready(function () {
        $('#sub_button').on('click', function () {
            let email_value = $("#useremail").val();
            // pattern of email
            let email_regex_pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
            // console.log(email_value);
            if (email_value == '') {
                $("#email_error").text('Please Enter Your Email ID');
                $("#email_error").css('color', '#ff3838');
                $('#useremail').focus();
                return false;
            }
            else if (!email_value.match(email_regex_pattern)) {
                $("#email_error").text('Please Enter Valid Email ID');
                $("#email_error").css('color', '#ff4d4d');
                $('#useremail').focus();
                return false;
            }
        });
    });
</script>

This JavaScript code is designed to provide email validation functionality using jQuery. It targets the submit button with the ID "sub_button" and attaches a click event handler to it. When the button is clicked, the function defined inside $(document).ready() is executed.

Within this function, the email value entered by the user is retrieved from the input field with the ID "useremail". Then, a regular expression pattern for validating email addresses is defined. This pattern checks for typical email formats, ensuring that it contains characters followed by '@' and a domain name with appropriate extensions.

The script then proceeds to validate the email input. If the input field is empty, it displays an error message prompting the user to enter their email address. The text color of this error message is set to red for emphasis. Additionally, the focus is set back to the email input field to encourage the user to correct the error. The function returns false to prevent the form from being submitted.

If the input field is not empty but does not match the defined email pattern, another error message is displayed indicating that the entered email address is invalid. Similar to the previous case, the text color of this error message is set to a different shade of red, and the focus is set to the email input field. Again, the function returns false to prevent form submission.

If the email input passes both validation checks, the function does not return false, allowing the form to be submitted. However, it's worth noting that this script doesn't handle form submission itself; it solely focuses on validating the email input before submission.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement