JSFiddle - React, Tailwind, and code Playground

by popsyjunior

HTML

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<form action="mail.php" id="theform" name="theform" method="post">
    <p><label for="name">Name</label><br /><input id="name" type="text" value="" name="name" /></p>
    <p><label for="email">E-mail</label><br /><input id="email" type="text" value="" name="email" /></p>
    <p><label for="message">Password</label><br /><input id="password" type="password" rows="7" cols="30"  name="password"></input></p>
    <p><input class="submit" type="submit" name="submit" value="Submit Form" /></p>
    <p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
</form>

CSS

body, input, textarea {
	font-size:12px;
	line-height:18px;
	font-family:Verdana, Geneva, sans-serif;
}
input {width:200px;}
.submit {width:120px;}

#error {
	color:red;
	font-size:10px;
	display:none;
}
.needsfilled {
	background:red;
	color:white;
}

JavaScript

/*
Created 09/27/09										
Questions/Comments: [email protected]						
COPYRIGHT NOTICE		
Copyright 2009 Joren Rapini
*/

	

$(document).ready(function(){
	// Place ID's of all required fields here.
	required = ["name", "email", "message", "password"];
	// If using an ID other than #email or #error then replace it here
	email = $("#email");
	errornotice = $("#error");
	// The text to show up within a field when it is incorrect
	emptyerror = "Please fill out this field.";
	emailerror = "Please enter a valid e-mail.";
    passwerror = "Please enter a valid password";

	$("#theform").submit(function(){	
		//Validate required fields
		for (i=0;i<required.length;i++) {
			var input = $('#'+required[i]);
			if ((input.val() == "") || (input.val() == emptyerror)) {
				input.addClass("needsfilled");
				input.val("");
                input.attr("placeholder", emptyerror);
                if( input.attr("type") == "password" ) {
                    input.attr("placeholder", passwerror );    
                }
				errornotice.fadeIn(750);
			} else {
				input.removeClass("needsfilled");
			}
		}
		// Validate the e-mail.
		if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
			email.addClass("needsfilled");
			email.val("");
            email.attr("placeholder", emailerror);
		}

		//if any inputs on the page have the class 'needsfilled' the form will not submit
		if ($(":input").hasClass("needsfilled")) {
			return false;
		} else {
			errornotice.hide();
			return true;
		}
	});
});