Tag Archives: js multiple field validation

Javascript validation for multiple fields

By 
<script type="text/javascript">
		function contact_form()
		{
		var Errmsg = true;		

			if(document.getElementById('email').value=="")
			{
				document.getElementById('err_email').innerHTML = "Email field is required";
				document.getElementById('email').focus();
				Errmsg = false;
			}
			if(document.getElementById('email').value != "")
			{
			var email_id = document.getElementById('email');
			var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
			if (!filter.test(email_id.value)) {
				document.getElementById('err_email').innerHTML = "Please enter valid email";
				document.getElementById('email').focus();
				Errmsg = false;
			}}
			
			if(document.getElementById('contact').value == "")
			{
				document.getElementById('err_contact').innerHTML = "Contact number field is required";
				document.getElementById('contact').focus();
				Errmsg = false;
			}
			var checkString = document.getElementById("contact").value;
			if (checkString != "") {		
			//var v = document.getElementById("menu_url").value;
			if(!checkString.match(/^[0-9\+\-\(\)]/)) 
			{
				document.getElementById('err_contact').innerHTML = "Please enter valid contact number";
				document.getElementById('contact').focus();
				Errmsg = false;
			}}
			
			if(document.getElementById('name').value=="")
			{
				document.getElementById('err_name').innerHTML = "Name field is required";
				document.getElementById('name').focus();
				Errmsg = false;
			}

/*			if(document.getElementById('captcha_input').value=="")
			{
				document.getElementById('err_captcha_input').innerHTML = "Captcha field is required";
				document.getElementById('captcha_input').focus();
				Errmsg = false;
			}*/
			

			if(Errmsg == false)
			{
				return false;
			}else{
				return true;
			}
		}	
	
	function empty(id)
	{
		if(document.getElementById(id).innerHTML = "")
		return false;
	}
</script>

----------------------------


<form name="contact" method="POST" action="contact-form.php?msg=invalid" onsubmit="return contact_form()">
                    <div class="form_left">Name <span class="red">*</span><span class="form_colon">:</span></div>
                    <div class="form_right">
						<input type="text" value="" class="textbox" name="name" id="name" onkeypress="empty('err_name')" maxlength="50">
						<br><div id="err_name" class="error_js"></div>
					</div>
  
                    <div class="form_left">Contact Number <span class="red">*</span><span class="form_colon">:</span></div>
                    <div class="form_right">
						<input type="text" value="" class="textbox" name="contact" id="contact" onkeypress="empty('err_contact')" maxlength="20">
						<br><div id="err_contact" class="error_js"></div>
					</div>
    
                    <div class="form_left">Email ID <span class="red">*</span><span class="form_colon">:</span></div>
                    <div class="form_right">
						<input type="text" name="email" id="email" value="" class="textbox" onkeypress="empty('err_email')" maxlength="50">
						<br><div id="err_email" class="error_js"></div>
					</div>
    
                    <div class="form_left">Address <span class="form_colon">:</span></div>
                    <div class="form_right">
		<textarea name="address" id="address" cols="" rows="5" class="textarea"></textarea>
					</div>
    
                    <div class="form_left">Message <span class="form_colon">:</span></div>
                    <div class="form_right">
                        <textarea name="description" id="description" cols="" rows="5" class="textarea" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" maxlength="2000">(Maximum 2000 characters allowed)</textarea>
					</div>

<!--
Captcha *:

 

<span style=”min-height:15px; padding-top:8px;font-size:11px;color:#ff0000″>

 

</span> </div>–>


                    <!-- Button begain-->
                    <div class="form_left">&nbsp;</div>
                    <div class="form_right">
                        <div class="checkout_button">
                        <input name="btn_submit" type="submit" value="Submit" class="form_button">
                        </div>
                        <div class="checkout_button">
                        <input name="cancel" type="reset" value="Clear" class="form_button">
                        </div>
                    </div>
				</form>		
                    <!-- Button End-->