JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
   <form id="pseudoForm" >
    <span class="error"></span>
    <input type="text" name="first_name" id="first_name" />
    <input type="text" name="last_name" id="last_name" />
    <input type="text" id="myinput" name="email">
    <input type="submit"  value="send"/>
    </form>

JavaScript

$(document).ready(function(){
	
	
    $("#pseudoForm").validate({
    debug: true,
	validClass: "success",
	errorClass: "invalid",
	 highlight: function(element, errorClass) {
		$(element).fadeOut(function() {
		$(element).fadeIn();
		});
		},
    onfocusout: function(a){$(a).valid()},
    rules: {
        first_name: 'required',
        last_name: 'required',
         email: {
            required: true,
            email: true,
			minlength: 10,
			remote: false
           }
    },
	messages: {
			name: "Please specify your name",
			email: {
			required: "We need your email address to contact you",
			email: "Your email address must be in the format of [email protected]"
			}  
		},
	 submitHandler: function(form) {
		// do other stuff for a valid form
		alert(1);
		form.submit();
		},
     invalidHandler: function(event, validator) {
    var errors = validator.numberOfInvalids();
         $('.error').html("There are "+errors+" errors<br>");
     }
 });

});