JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<div class='register-box'>
<form  id="myform" class="register-form">
					<?php 
						if($checksuccess){ alert("success",$success); }
						if($checkerror){ alert("error",$error);
						}
					?>
					
					<div class="field">
						<label for="username">Username</label><div id="username_validate"></div>
						<input type="text" name="username"  value="" placeholder="Enter your desired username"/>
					</div>
					
					<div class="field">
							<label for="email">E-mail</label><div id="email_validate"></div>
							<input type="email" name="email" value="" placeholder="Enter a valid e-mail address"/>
					</div>
				
					<button class="login-btn" data-disable-with="Signing In..." name="login" type="submit">Sign In</button>
					
				</form>
</div>

CSS

.register-box :-ms-input-placeholder {  
   color: #c3c3c3;
   font-weight: 100; 
}
.register-box .field.half{
	width: 48.5% !important;
	float: left;
}
.register-box .field.toc{
	display: block;
	margin-top: 70px;
	margin-bottom: 25px;
	font-size: 11px;
}
.register-box .field .has-error{
	border: 1px solid red !important;
	
}
.register-box .field .has-error.success {
	border:none !important;
}
.register-box .field .has-success{
	border: 1px solid #42CDA1 !important;
	background: #EEFBF7 !important;
	color: black !important;
	border-bottom: 0px !important;
}
.register-box .success > .error{
	border: 1px solid #42CDA1 !important;
}
.register-box .field .valid{
	border: 1px solid #42CDA1 !important;
}
.register-box .error{
	margin-left: 200px !important;
	float: left;
	width: 150px;
	max-width: 150px;
	text-align: left;
	color: red;
	background: red;
	color: white;
	font-weight: bold;
	font-size: 11px;
	-webkit-font-smoothing: antialiased;
	font-smooth: always;
	-moz-osx-font-smoothing: grayscale;
	padding: 5px 7px;

}

JavaScript

$('#myform').validate({
    
    		debug: true,
    		errorClass: "has-error",
			errorElement: "div",
			errorContainer: $("#warning, #summary"),
			
			errorPlacement: function (error, element) {
			            var name = $(element).attr("name");
			            error.appendTo($("#" + name + "_validate"));
			            $("#" + name + "_validate").addClass('error');
                
			        },
			    
			
			/*errorPlacement: function(error, element) {
				error.appendTo("#errorHolder");
			},*/
			success: function(label,element) {
                label.parent().removeClass('error');
				label.remove();
				//var parent = $('.success').parent().get(0); // This would be the <a>'s parent <li>.
				//$(parent).addClass('has-success');	
			},
    		
    		rules: {
	            username: {
	                 required: false
                   minlength: 3
            	},
            	email: {
	                required: true,
	                minlength: 5
            	}
            	
        },
        
            highlight: function(element, errorClass) {
                    $(element).addClass(errorClass);
                },
        
        messages: {
                firstname: "Enter your firstname",
                lastname: "Enter your lastname",
                username: {
                    required: "Enter a username",
                    minlength: jQuery.format("Enter at least {0} characters"),
                    remote: jQuery.format("{0} is already in use")
                }
            },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });