How To Validate Email Using Jquery With Toastr Message

Posted By Bajarangi soft , Posted On 09-01-2021

To validate email using jQuery, use the regex pattern. You can try to run the following code to learn how to validate email using jQuery

How To Validate Email Using Jquery With Toastr Message

Step 1:Create Index.php file and implement html code in it

<html>
<head>
    <title>Email Validation</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://codeseven.github.io/toastr/build/toastr.min.js"></script>
    <link href="http://codeseven.github.io/toastr/build/toastr.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<main  class="py-4" style="margin-top: 80px">
<div class="container">
    <div class="row justify-content-center" id="main">
        <div class="col-md-6">
            <form class="business_form contactusform" method="post" id="business_form" action="">
                <div class="form-group row">
                    <label for="name" class="">Email</label>
                    <br>
                    <input id="email" type="email" class="form-control" name="bemail" value="" required="" autocomplete="email" autofocus>
                </div>
                <div class="form-group row mb-0">
                    <div class="col-md-6 offset-md-4">
                        <button type="submit" class="save_button btn btn-success" id="submit">
                            <span class="button_text">SUBMIT</span>
                        </button>
                    </div>
                </div>
            </form>

        </div>

    </div>
</div>
</main>
</body>
</html>

Step 2:Add Script Inside html code to validate email

<script>
    $(document).ready(function () {
        $("#submit").click(function () {
            var email = $('#email').val();
            if (email == '') {
                toastr.error('All fields required!');
                return false;
            }
            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (!regex.test(email)) {
                toastr.error('Please Enter Valid Email!');
                return false;
            }
        });
    });

</script>