JSFiddle - React, Tailwind, and code Playground

by Phil Glau

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="passwordResetForm">
	<div><p>Let's reset that password</p>
	</div><div><div>
	<label>New Password:</label></div><div>

<input name="password" id="password" type="password" size="20" />
        
	</div></div><div><div><label>Confirm Password:</label>
	</div><div>
            
<input name="confirmPassword" id="confirmPassword" type="password" size="20" />
        
	</div></div><div><div>
            
<input type="submit" id="passwordResetButton" />

	</div></div>
</form>

JavaScript

$(document).ready(function () {

    $("#passwordResetForm").validate({
        rules: {
            password: {
                required: true,
                minlength: 8,
                maxlength: 40,
                // comment out for demo
                /* 
                remote: {
                    url: "/ajax/isPasswordOK",
                    data: {
                        product: function () {
                            return $("#password").val();
                        }
                    }
                }
                */
            },
            confirmPassword: {
                required: true,
                equalTo: "#password"
            },
        },
        messages: {
            password: {
                required: "Please enter a password",
                minlength: "Password must be at least {0} characters long",
                remote: "Password should contain: <li>At least one upper case character <li>At least one lower case character <li>At least one number <li>And may not contain any of the following: \\;-\")(&*='|$"
            },
            confirmPassword: {
                required: "Please confirm your password",
                equalTo: "The passwords do not match"
            },
        },
        onkeyup: false, //turn off auto validate whilst typing
        submitHandler: function (form) {
            alert('is good');
            return false;
        }
    });

});