JSFiddle - React, Tailwind, and code Playground

by oktaviardi pratama

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<form id="loginForm" name="loginForm" class="custom" action="/do/authenticate" method="post">
    <label for="email">Email:</label>
    <input id="email" name="email" type="text" value="" />
    <label for="password">Password:</label>
    <input id="password" name="password" type="password" value="" />
</form>
<button id="login" class="small success button" style="margin-left: 5px;">Login</button>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>

CSS

#docs {
    display: block;
    position: fixed;
    bottom: 0;
    right: 0;
}

JavaScript

$(document).ready(function () {

    $("#loginForm").validate({
        rules: {
            email: {
                required: true,
                minlength: 6,
                maxlength: 40
            },
            password: {
                required: true,
                minlength: 8,
                maxlength: 40
            }
        },
        messages: {
            email: {
                required: "Please enter an email address",
                minlength: "Email address must be at least {0} characters long"
            },
            password: {
                required: "Please enter a password",
                minlength: "Password must be at least {0} characters long"
            }
        },
        onkeyup: false
    });
    
    $('#login').click(function() {
        $("#loginForm").submit();
    });

});