JSFiddle - React, Tailwind, and code Playground

by sparky672

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script>
<form id="form1" name="login" method="post" action="mainpage.html">
    <div class="loginpanel">
        <div>
            <input type="text" id="emailid" name="emailid" class="input-text" placeholder="name@domain.com" />
            <br/>
            <br/>
            <input type="password" id="password" name="password" class="input-text" placeholder="password" />
            <div class="help_icon"><a href="#"><img src="Images/help-icon.png" /></a>

            </div>
            <br/>
            <br/>
            <input type="submit" id="submit" value="Login" class="submit-button" />
        </div>
    </div>
</form>

JavaScript

$(function () {
    $("#form1").validate({
        // Specify the validation rules
        rules: {
            emailid: {
                required: true,
                email: true
            },
            password: {
                required: true,
                minlength: 5
            }
        },

        // Specify the validation error messages
        messages: {
            username: "Please enter a valid email address",
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            }
        }
    });

});