Form Validation

Learn to validate form using javascript

by Meily Chhon

HTML

<h1>Form Validation</h1>
	<form id="main-form" method="get">
		<fieldset>
			<legend>Form</legend>
				<p>
					<label>Email:</label>
					<input type="text" placeholder="Please Fill in Your Email"/>
					<span id="required" class="error-msg">This is required!</span>
				</p>
				<p>
					<label>Select Your Gender:</label>
					<select>
						<option value="female"></option>
						<option value="female">Female</option>
						<option value="male">Male</option>
					</select>
					<span id="required" class="error-msg">This is required!</span>
				</p>
				<p>
					<label>Maritial Status: </label>
					<label>Single<input type="checkbox"/></label>
					<label>Married<input type="checkbox"/></label>
					<span id="required" class="error-msg">This is required!</span>
				</p>
				<input type="button" value="Submit"/>
		</fieldset>
	</form>

JavaScript

//validate form
$(document).ready(function(){
    
	$("form").submit(function( event ){
	});
	var email = $("input[type="submit"]");
	var gender = $("select:option:selected").val();
	
});