Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
I have a form with some validation that prevents the user from submitting the form with empty input boxes. However, when the form submit button is clicked, the error message is displayed but then the form is still processed.
 
This is the code I have:
 
function functionName() {
	var var1 = document.getElementById('id1').value;
	var var2 = document.getElementById('id2').value;
	var var3= document.getElementById('id3').selectedIndex;
	var var4= document.getElementById('id4').value;
	if ((var3 === 1) &&(var1.length < 2) || (var2.length < 2)){
        alert("");	
        var1.style.borderColor = "red";
	var2.style.borderColor = "red";
	return false;
	}
	else if ((var3 === 2) && (var4.length < 2)){
        alert("");
	var4.style.borderColor = "red";
	return false;
	}
	else {
	var4.style.borderColor = "green";
	var1.style.borderColor = "green";
	var2.style.borderColor = "green";
	return true;
	}
	}
Posted 21-Apr-13 8:00am
jba1991389
Comments
PIEBALDconsult at 21-Apr-13 13:23pm
   
The Submit button shouldn't be Enabled until all the requirements are satisfied.
I suspect you are not doing anything with the result of this method.
Step through with the debugger and see what happens.
hemantrautela at 21-Apr-13 13:24pm
   
what do you mean by form processed....(this fnction is return true or false thats it not other processing...)
Prasad Khandekar at 21-Apr-13 13:32pm
   
Do you call this function on onclick of submit button? Try calling this function from form's onsubmit handler.
Mike Meinz at 21-Apr-13 18:32pm
   
This may or may not be the cause of the problem, but sometimes operator precedence is a cause of problems when compound if statements are used.
 
For this line of code, are you sure that the order of precedence of the AND and OR operators is what you want?
if ((var3 === 1) && (var1.length < 2) || (var2.length < 2)){
 

Based on the C# Operators chart in the documentation, the following is how that line of code would be interpreted using parenthesis to signify the precedence:
if ( ( (var3 === 1) && (var1.length < 2) ) || (var2.length < 2)){
*********************************** || ***************
 
My guess is that you really intended this:
if ( (var3 === 1) && ( (var1.length < 2) || (var2.length < 2) ) ){
********** && ****************************************

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

How actually you are making call to this function ??
 
It has to be either of these -
<form method="post" onsubmit="return functionName()">
...
<input type="submit" value="Submit">
</input></form>
 
or (inline or within the function invoked on click of the button)
 
<form method="post">
...
<input type="submit" value="Submit" onclick="return functionName()">
</input></form>
 
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 587
1 Sergey Alexandrovich Kryukov 479
2 Maciej Los 305
3 Mathew Soji 195
4 Afzaal Ahmad Zeeshan 170
0 OriginalGriff 7,356
1 Sergey Alexandrovich Kryukov 6,777
2 DamithSL 5,461
3 Manas Bhardwaj 4,916
4 Maciej Los 4,475


Advertise | Privacy | Mobile
Web02 | 2.8.1411023.1 | Last Updated 22 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100