Blog

Javascript Form Validation RSS

4 replies

Last post Jan 25, 2017 11:02 AM by ifour.nishith@gmail.com

‹ Previous Thread|Next Thread ›

Shortcuts

RobertH3

Member

8 Points

83 Posts

Javascript Form Validation

Jan 14, 2017 05:53 PM|RobertH3|LINK

I have two Javascript functions that I have used - the first one used to work, the second one has issues too

<script type="text/javascript">
		function WebForm_OnSubmit()
		{
			if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
			{
				var prevcontrol = "a";
				for (var i in Page_Validators)
				{
					try
					{
						var control = document.getElementById(Page_Validators[i].controltovalidate);
						if (Page_Validators[i].isvalid)
						{
							control.className = "has-success";
						}
						if (!Page_Validators[i].isvalid)
						{
							control.className = "has-warning";
							prevcontrol = control;
						}
						if (control = prevcontrol)
						{
							control.className = "has-warning";
						}
					} catch (e) { }
				}
				return false;
			}
			return true;
		}
	</script>

This one doesn't seem to work at all!

<script type="text/javascript">
		function BtnClick()
		{
			var val = Page_ClientValidate();
			if (!val)
			{
				var i = 0;
				for (; i < Page_Validators.length; i++)
				{
					if (!Page_Validators[i].isvalid)
					{
						$("#" + Page_Validators[i].controltovalidate)
						 .css("border-color", "red");
					}
					if (Page_Validators[i].isvalid)
					{
						$("#" + Page_Validators[i].controltovalidate)
						 .css("border-color", "#5cb85c");
					}
				}
			}
			return val;
		}
	</script>

This one returns the first control as invalid but marks all others valid even if they are not.

I created the first one because some of the textboxes either have requiredfield or regex, and it detects if either one is invalid.

RobertH3

Member

8 Points

83 Posts

Re: Javascript Form Validation

Jan 14, 2017 06:51 PM|RobertH3|LINK

<script type="text/javascript">
				function WebForm_OnSubmit() {
					if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
						var prevcontrol = "a";
						for (var i in Page_Validators) {
							try {
								var control = document.getElementById(Page_Validators[i].controltovalidate);
								if (Page_Validators[i].isvalid) {
									$(control).addClass("form-control-valid");
								}
								if (!Page_Validators[i].isvalid) {
									$(control).addClass("form-control-invalid");
									prevcontrol = control;
								}
								if (control = prevcontrol) {
									$(control).addClass("form-control-invalid");
								}
							} catch (e) { }
						}
						return false;
					}
					return true;
				}
	</script>

This is closer, I get validation, but I am still getting a valid when invalid if the control has 2 validators attached to it. So if I have a required field and if I have a regex, if the reqfld is invalid because there is no input, it returns valid because the regex is not registering invalid

RobertH3

Member

8 Points

83 Posts

Re: Javascript Form Validation

Jan 14, 2017 10:56 PM|RobertH3|LINK

	<script type="text/javascript">
		function WebForm_OnSubmit()
		{
			if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
			{
				var prevcontrol = "a";
				var valid = 1;
				for (var i in Page_Validators)
				{
					try
					{
						var control = document.getElementById(Page_Validators[i].controltovalidate);
						if (control != prevcontrol )// If New Control is not the old control
						{
							if (Page_Validators[i].isvalid)	// If Item is Valid
							{
								$(control).addClass("form-control-valid"); // Make Green
								valid = 1; //Set to Valid
							}
							if (!Page_Validators[i].isvalid) // If Item is Not Valid
							{
								$(control).addClass("form-control-invalid"); // Make Red
								valid = 0; //Set to Invalid
							}
						}
						if (control == prevcontrol)	 //If New control is the same as previous control, then second validator is active
						{
							$(control).removeClass("form-control-valid");	//remove CssClasses
							$(control).removeClass("form-control-invalid");	//remove CssClasses
							if (valid == 1)	//If First Validator was valid
							{
								if (Page_Validators[i].isvalid)	 // If Second validator and First Validator are valid
								{
									$(control).addClass("form-control-valid"); //Make Green
								}
								if (!Page_Validators[i].isvalid)  // If Second validator is invalid but First Validator is valid
								{
									$(control).addClass("form-control-invalid"); //Make Red
								}
							}
							if (valid == 0)	//If First Validator was invalid
							{

									$(control).addClass("form-control-invalid"); // Make Red because it doesnt matter about the second if the first was invalid!
							}
						}
						prevcontrol = control;
					}
					catch (e) { }
				}
				return false;
			}
			return true;
		}
	</script>

This code works with single validators or double validators - place at end of page, and add to form

<form runat="server" onsubmit="return(WebForm_OnSubmit());">

Zhi Lv - MSF...

All-Star

44726 Points

6713 Posts

Microsoft

Re: Javascript Form Validation

Jan 16, 2017 06:44 AM|Zhi Lv - MSFT|LINK

Hi RobertH3,

RobertH3

	<script type="text/javascript">
		function WebForm_OnSubmit()
		{
			if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
			{
				var prevcontrol = "a";
				var valid = 1;
				for (var i in Page_Validators)
				{
					try
					{
						var control = document.getElementById(Page_Validators[i].controltovalidate);
						if (control != prevcontrol )// If New Control is not the old control
						{
							if (Page_Validators[i].isvalid)	// If Item is Valid
							{
								$(control).addClass("form-control-valid"); // Make Green
								valid = 1; //Set to Valid
							}
							if (!Page_Validators[i].isvalid) // If Item is Not Valid
							{
								$(control).addClass("form-control-invalid"); // Make Red
								valid = 0; //Set to Invalid
							}
						}
						if (control == prevcontrol)	 //If New control is the same as previous control, then second validator is active
						{
							$(control).removeClass("form-control-valid");	//remove CssClasses
							$(control).removeClass("form-control-invalid");	//remove CssClasses
							if (valid == 1)	//If First Validator was valid
							{
								if (Page_Validators[i].isvalid)	 // If Second validator and First Validator are valid
								{
									$(control).addClass("form-control-valid"); //Make Green
								}
								if (!Page_Validators[i].isvalid)  // If Second validator is invalid but First Validator is valid
								{
									$(control).addClass("form-control-invalid"); //Make Red
								}
							}
							if (valid == 0)	//If First Validator was invalid
							{

									$(control).addClass("form-control-invalid"); // Make Red because it doesnt matter about the second if the first was invalid!
							}
						}
						prevcontrol = control;
					}
					catch (e) { }
				}
				return false;
			}
			return true;
		}
	</script>

This code works with single validators or double validators - place at end of page, and add to form

<form runat="server" onsubmit="return(WebForm_OnSubmit());">

Do you mean you have solved the problem by yourself, and above code is the solution? If that is the case, thanks for sharing your solution, it might help others to resolve similar threads.

Best regards,
Dillion

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

ifour.nishit...

Member

10 Points

31 Posts

Re: Javascript Form Validation

Jan 25, 2017 11:02 AM|ifour.nishith@gmail.com|LINK

Hi,

You use the below function and working with Javascript Form Validation

<script>
	$(document).ready(function()
	{
		<!-- $('#alert').hide(); -->
		
		
		function validatepersonalForm()
		{
			//$( "#nexttab" ).prop( "disabled", true );
			ResetValidationControls();
			var flag=true;
			
			var mobile=$('#txtmobile').val();
			if(mobile.length == 0 ) 
			{
				$('#mobilelbl').show();
				$('#txtmoblie').focus();
				flag=false;
			}
			else if(mobile.length>0)
			{
				if (!Validatecontact($("#txtmobile").val())) 
				{
					$('#mobilelbl').show();
					$('#txtmoblie').focus();
					flag=false;
				}
			}
			else 
			{
				$('#mobilelbl').hide();
			}
	
			
			var phone=$('#txtphone').val();
			if(phone.length == 0 ) 
			{
				$('#phonelbl').show();
				$('#txtphone').focus();
				flag=false;
			}
			
			var zipcode=$('#txtzip').val();
			if(zipcode.length == 0 ) 
			{
				$('#ziplbl').show();
				$('#txtzip').focus();
				flag=false;
			}
			
			var city=$('#dblcity').val();
			if(city=="-----Select-----")
			{
				$('#citylbl').show();
				$('#dblcity').focus();
				flag=false;
			}
			
			var address=$('#txtaddress').val();
			if(address.length == 0 ) 
			{
				$('#addresslbl').show();
				$('#txtaddress').focus();
				flag=false;
			}
			
			var email=$('#txtemail').val();
			if(email.length == 0 ) 
			{
				
				$('#emaillbl').show();
				$('#txtemail').focus();
				flag=false;
			}
			else if(email.length>0)
			{
				if (!ValidateEmail($("#txtemail").val())) 
				{
					$('#emaillbl').show();
					$('#txtemail').focus();
					flag=false;
				}
			}
			else 
			{
				$('#emaillbl').hide();
			} 
			
			var lname=$('#lname').val(); 
			if(lname.length == 0 ) 
			{
				$('#lnamelbl').show();
				$('#lname').focus();
				flag=false;
			}
			
			var fname=$('#fname').val();
			if(fname.length == 0 ) 
			{
				$('#fnamelbl').show();
				$('#fname').focus();
				flag=false;
			}
			return flag;
		}
		
		// Validation
		function ValidateForm()
		{
			ResetValidationControls();
			var flag=true;
			var basic=$('#basic1').val();
			if(basic.length == 0 ) 
			{
				$('#basiclbl').show();
				$('#basic1').focus();
				flag=false;
			}
			
			var designation=$('#txtdesignation').val();
			if(designation.length == 0 ) 
			{
				$('#designationlbl').show();
				$('#txtdesignation').focus();
				flag=false;
			}
			
			var department=$('#dbldepartment').val();
			if(department=="-----Select-----")
			{
				$('#departmentlbl').show();
				$('#dbldepartment').focus();
				flag=false;
			}
			return flag;
		}
		function ResetValidationControls()
		{
			$('#basiclbl').hide();
			$('#designationlbl').hide();
			$('#departmentlbl').hide();
			$('#mobilelbl').hide();
			$('#phonelbl').hide();
			$('#ziplbl').hide();
			$('#citylbl').hide();
			$('#addresslbl').hide();
			$('#emaillbl').hide();
			$('#lnamelbl').hide();
			$('#fnamelbl').hide();
		}
</Script>

Nisith Tukharia
Software developer
custom software development company India

‹ Previous Thread|Next Thread ›