How To Check Email Validation In JavaScript

How To Check Email Validation In JavaScript

byRAYS CODING -
0
Learn how to Validate email addresses using JavaScript in our latest blog post. Dive into the basics of email validation techniques to ensure data integrity and enhance user experience on your website.

How To Check Email Validation In JavaScript

Table of Content

  • Create Form
  • Design CSS
  • Validation Code

Create Form

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container mt-5">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header wrapper">
                            <h3 class="title">Rays Coding :- JavaScript Validation</h3>
                        </div>
                        <div class="card-body">
                            <form action="" method="post">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="mb-3 field">
                                            <input type="email" class="form-control" id="email" name="useremail" autocomplete="off">
                                            <label for="email" class="form-label">Email</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row error-row" id="errorRow" style="display: none;">
                                    <div class="col-lg-12">
                                        <div class="mb-3 field">
                                            <div class="alert alert-danger" id="error"></div>
                                        </div>
                                    </div>
                                </div>                            
                                <div class="row success-row" id="successRow" style="display: none;">
                                    <div class="col-lg-12">
                                        <div class="mb-3 field">
                                            <div class="alert alert-success" id="success"></div>
                                        </div>
                                    </div>
                                </div>                            
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="field">
                                            <button type="button" class="btn btn-primary w-100" onclick="validation()">SUBMIT</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>
    </html>


This HTML code represents a simple web page with a form for email validation using JavaScript. 

The page starts with the usual HTML5 doctype declaration, specifying the document type and language.

In the <head> section, there are meta tags for character set and viewport settings. Additionally, there's a title tag left empty for customization. Two external CSS files are linked: Bootstrap CSS and a custom stylesheet named "style.css".

Moving on to the <body> section, it begins with a Bootstrap container to maintain content alignment. Inside it, there's a form divided into three main sections: a card header, a card body containing the form, and a footer.
    
How To Check Email Validation In JavaScript

The form consists of an input field for email address entry wrapped inside a Bootstrap card component. The input field has an id of "email" and a name of "useremail". It's accompanied by a label for accessibility.

Below the input field, there are two rows designated for displaying validation messages: one for error messages and another for success messages. Both are initially hidden (style="display: none;").

The form also includes a "SUBMIT" button wrapped inside a Bootstrap button component, triggering a JavaScript function named "validation()" when clicked. This function is expected to handle the email validation logic.

Finally, at the end of the body section, there's a reference to an external JavaScript file named "script.js", where the validation logic is likely implemented.

Overall, this HTML code sets up a basic web page structure with a form for email validation, leveraging Bootstrap for styling and JavaScript for validation functionality.

Design CSS

    @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
    *
    {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    body
    {
        background: aliceblue;
    }
    .card
    {
        width: 60%;
        margin: 10px auto;
        background: #fff;
    }
    .wrapper
    {
        background: #fff;
        border-radius: 15px;
        box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
        background: linear-gradient(-135deg, #c850c0, #4158d0);
    }
    .title
    {
        color: #fff;
        text-shadow:  0 0 10px #fff;
        text-align: center;
    }
    .field
    {
        height: 50px;
        width: 100%;
        margin-top: 20px;
        position: relative;
    }
    .field input.form-control
    {
        height: 100%;
        width: 100%;
        box-shadow: none;
        outline: none;
        font-size: 17px;
        padding-left: 20px;
        border: 1px solid lightgrey;
        border-radius: 25px;
        transition: all 0.3s ease;
    }
    .field input.form-control:focus,
    .field input.form-control:valid
    {
    border-color: #4158d0;
    }
    .field label
    {
        position: absolute;
        top: 50%;
        left: 20px;
        color: #999999;
        font-weight: 400;
        font-size: 17px;
        pointer-events: none;
        transform: translateY(-50%);
        transition: all 0.3s ease;
    }
    .field input.form-control:focus ~ label,
    .field input.form-control:valid ~ label
    {
        top: 0%;
        font-size: 16px;
        color: #4158d0;
        background: #fff;
        transform: translateY(-50%);
    }
    .field button
    {
        border: none;
        outline: none;
        background: linear-gradient(-135deg, #c850c0, #4158d0);  
    }
    .error-row
    {
        display: none;
    }

How To Check Email Validation In JavaScript

Validation Code

   
    function validation()
    {
        // get the input box value
        let inputVal = document.getElementById('email').value.trim();
        // Regex value
        let nameRegex = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        // Conditions
        if (inputVal === '')
        {
            document.getElementById('error').innerText = "Please enter the email.";
            document.getElementById('errorRow').style.display = "block";
            hideError();
            return false;
        }
        else if (!nameRegex.test(inputVal))
        {
            document.getElementById('error').innerText = "Please enter a valid email.";
            document.getElementById('errorRow').style.display = "block";
            hideError();
            return false;
        }
        else
        {
            document.getElementById('success').innerText = 'You Enter ' + inputVal;
            document.getElementById('successRow').style.display = "block";
            return true;
        }
    }
    // Hide error message
    function hideError()
    {
        setTimeout(function() {
            document.getElementById('errorRow').style.display = "none";
        }, 5000);
    }

How To Check Email Validation In JavaScript

This JavaScript code defines a function called validation() designed to validate email input in an HTML form. The function first retrieves the value entered in the email input field, removing any leading or trailing whitespace. It then defines a regular expression pattern to validate the email format. The function checks different conditions using if-else statements: if the input is empty, it displays an error message prompting the user to enter an email; if the input doesn't match the email pattern, it shows an error message indicating an invalid email format. If the input passes these checks, indicating a valid email, a success message is displayed. Additionally, there's a hideError() function that uses setTimeout() to hide the error message after a delay of 5 seconds. This code provides a basic yet effective email validation mechanism for ensuring correct user input in an HTML form.
Tags

You may like these posts

Post a Comment

Previous Post Next Post

Recent in Technology

Responsive Advertisement