validation

by narensrinivasans

HTML

<form action=""><div class="validation-input">Email<br/>
    <input type="text" name="email"  id="email" class="global-input required email" /></div>
<div class="validation-input">Text<br/><input type="text" name="password" id="text" class="global-input required next-list"/></div>
<div class="validation-input">Url<br/><input type="text" name="url" id="url" class="global-input required url"/></div>
<div class="validation-input">Number<br/><input type="text" name="number" id="number" class="global-input required number" onkeypress="return isNumberKey(event)" /></div>
    
    <div class="validation-input">password<br/><input type="password" name="password" id="password" class="global-input required password"/></div>
<div class="validation-input">confirm password<br/><input type="password" name="password" id="confirm" class="global-input required password"/></div>
    
    <input type="submit" name="submit" value="Sign In" class="global-submit" />
</form>
<script>
    	function isNumberKey(evt)
	{
	var charCode = (evt.which) ? evt.which : event.keyCode
	if (charCode > 31 && (charCode < 48 || charCode > 57))
	return false;
	
	return true;
	}
</script>

CSS

span.form-error {
    color:#f00;
}

JavaScript

$('.global-submit').click(function(e){
	
		// Declare the function variables:
		// Parent form, form URL, email regex and the error HTML
		var $formId = $(this).parents('form');
		var formAction = $formId.attr('action');
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		var urlReg = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/;

		var $error = $('<span class="form-error"></span>');
		var isnum = /^\d+$/;

		// Prepare the form for validation - remove previous errors
		$('li',$formId).removeClass('form-error');
		$('span.form-error').remove();

		// Validate all inputs with the class "required"
		$('.required',$formId).each(function(){
			var inputVal = $(this).val();
			var $parentTag = $(this).parent();

			if( inputVal == '' ){
                			if($(this).is('#password') == true){
				$parentTag.addClass('form-error').append($error.clone().text('Required Field'));
			}
			else if($(this).is('#confirm') == true){
				$parentTag.addClass('form-error').append($error.clone().text('Required Field'));
				//$('span.form-error').css('visibility', 'hidden');
			}
                else {
				$parentTag.addClass('form-error').append($error.clone().text('Required Field'));
                }
			}
			
			// Run the email validation using the regex for those input items also having class "email"
			if($(this).hasClass('email') == true){
				if(!emailReg.test(inputVal)){
					$parentTag.addClass('form-error').append($error.clone().text('Enter valid email'));
				}
			}
			
			// Run the email validation using the regex for those input items also having class "email"
			if($(this).hasClass('url') == true && inputVal != ''){
				if(!urlReg.test(inputVal)){
					$parentTag.addClass('form-error').append($error.clone().text('Enter valid URL'));
				}
			}
			
			// Run the email validation using the regex for those input items also having class...