JSFiddle - React, Tailwind, and code Playground

by eVerify

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="container">
    <div class="row">
         <h3>About This Sample</h3>

        <p>jQuery email syntax validation demo using <a href="http://jqueryvalidation.org" rel="nofollow">.validate()</a> plugin. See full article at <a href="https://www.verifyemailaddress.io/Validate_Email/jQuery-Email-Validation-1" rel="nofollow">verifyemailaddress.io</a>.</p>
        
<h3>Email Address Syntax Validation Using jQuery .validate Plugin</h3>

        <p>Test Scenarios:</p>
        <ul>
            <li><em>Pelé@example.com</em> - should pass validation</li>
            <li><em>example.com</em> - should fail validation</li>
            <li><em>Pelé@example.com.br</em> - should pass validation</li>
            <li><em>Pelé@bücher.com</em> - should pass validation</li>
        </ul>
        <form id="myForm">
            <div class="form-group">
                <label class="control-label" for="email">Email:</label>
                <div class="input-group"> <span class="input-group-addon">@</span>

                    <input class="form-control" placeholder="Enter email address" name="myEmail" id="myEmail" type="text" />
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
</div>

JavaScript

$('#myForm').validate({
    rules: {
        myEmail: {
            minlength: 3,
            maxlength: 255,
            required: true,
            email: true
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function (form) {
        alert('Form validated and submitted ok.');
        return false;
    }
});