JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- HTML form for validation demo -->
<form action="" method="post" id="register-form" novalidate="novalidate">
 
    <h2>User Registration</h2><br /><br />
 
<div id="form-content">

<input type="text" name="firstname" placeholder="First Name">

<input type="text" name="lastname" placeholder="Last Name">

<input type="text" name="email" placeholder="Email">          

<input type="password" name="password" placeholder="Password">

<p>By clicking register you agree to our policy</p>
    
<br /><input type="submit" value="Register" class="submit">
    

</div>

</form>

CSS

/* example styles for validation form demo */


#register-form {
    font-family: arial, helvetica, sans-serif;
    font-size: 11px;
    background: #F8FDEF;
    border: 1px solid #DFDCDC;
    border-radius: 15px 15px 15px 15px;
    display: inline-block;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-top: 10px;
    padding: 25px 50px 10px;
    width: 350px;
}

#register-form input {
    width: 220px;
    display: inline-block; 
    padding: 5px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
}
 
#register-form .submit {  
    padding: 5px;
    width: 220px;
    height: 40px !important;
}
 
#register-form input.error {
    border: 1px solid red;
    display: block;
    margin-bottom: 5px;
    margin-top: 0px;
    padding: 5px;
    text-align: left;
    width: 220px;
}

.error {
    color: red;
    display: block;
    padding-bottom: 8px;
    text-align: left;
    width: 220px;
}

#register-form input.checked {
    border: 1px solid green;
    display: block;
    margin-bottom: 5px;
    margin-top: 0px;
    padding: 5px;
    text-align: left;
    width: 220px;
}

JavaScript

(function($, W, D) {
    var JQUERY4U = {};

    JQUERY4U.UTIL = {
        setupFormValidation: function() {
            //form validation rules
            $("#register-form").validate({
                rules: {
                    firstname: {
                        required: true,
                        minlength: 5
                    },
                    lastname: "required",
                    email: {
                        required: true,
                        email: true
                    },
                    password: {
                        required: true,
                        minlength: 5
                    },
                    agree: "required"
                },
                messages: {
                    firstname: {
                        required: "Please enter your firstname",
                        minlength: "First name longer than 5 characters" },
                    lastname: "Please enter your lastname",
                    password: {
                        required: "Please provide a password",
                        minlength: "Password must be at least 5 characters long"
                    },
                    email: "Please enter a valid email address",
                    agree: "Please accept our policy"
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });
        }
    }

    //when the dom has loaded setup form validation rules
    $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
    });

})(jQuery, window, document);