Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Form Submitting Wrongfully

JQuery formsummission Browsers

  • Please log in to reply
8 replies to this topic

#1 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 12 May 2012 - 06:27 AM

I am using a script to validate a few form fields before the form is submitted. The script is supposed to return false if the validation failed. On linux the script works fine in FF, Chrome and Opera. On windows the script fails and the form is submitted on Chrome, Safari and IE. Your taughts will be appreciated.

$(document).ready(function(){  
	// Place ID's of all required fields in the array.
	required=["formname","formemail"];
	email = $("#formemail");
	name = $("#formname");
	errornotice = $("#error");
	// The text to show up within a field when it is incorrect
	emptyerror = "Please fill out this field.";
	emailerror = "Please enter a valid e-mail.";
  
	$("#suggestionform").submit( function(){
		 //validate required fields
		 for(i =  0; i < required.length; i++){
			 var input = $('#'+required[i]);
			 if( (input.val() == "") || (input.val() == emptyerror)){
				 input.addClass("needsfilled");
				 input.val(emptyerror);
				 errornotice.fadeIn(750);
			 }else {
				 input.removeClass("needsfilled");
			 }
		 }		
		 if( !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){
			 email.addClass("needsfilled");
			 email.val(emailerror);
		 }		
		 if ( "" == name.val()){
			 name.addClass("needsfilled");
			 name.val(emptyerror);
		 }
		 if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +  $("#textarea1").val() + $("#textarea2").val() == "") {
			 errornotice.fadeIn(750);
			 alert("returning fail")
			 return false;
		 }
		 if( $(":input").hasClass("needsfilled")){
			 alert("returning fail here")
			 return false;
		 }else{errornotice.hide();return true;}	
	});  
  
	$(":input").focus( function(){
		if ($(this).hasClass("needsfilled")){
			$(this).val("");
			$(this).removeClass("needsfilled");
		}
	})  
});

  • 0

#2 papabear

papabear

    CC Devotee

  • Senior Member
  • PipPipPipPipPipPip
  • 472 posts
  • Location:DarkSide

Posted 12 May 2012 - 02:36 PM

can you also post your html form where you use this? The problem might be there. Because your javascript code should work
  • 0
Life has no CTRL+Z
Never Forget To HIT "LIKE" If I Helped

#3 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 14 May 2012 - 07:10 AM

Overview of the form:
<form method="post" action="suggestions/suggestions-receive.php" id="suggestionform" onsubmit="return suggestionSubmit(this);">
<input type="submit" value="Submit" style="width:100px"/>



The following is the changes I have made to the code.
Version 2  
var required=["formname","formemail"];
var email = $("#formemail");
var name = $("#formname");
var errornotice = $("#error");
// The text to show up within a field when it is incorrect
var emptyerror = "Please fill out this field.";
var emailerror = "Please enter a valid e-mail.";


function suggestionSubmit(theform){	
	  required=["formname","formemail"];	
	  email = $("#formemail");	
	  name = $("#formname");	
	  errornotice = $("#error");	
	  // The text to show up within a field when it is incorrect	
	  emptyerror = "Please fill out this field.";	
	  emailerror = "Please enter a valid e-mail.";		  
	for(i =  0; i < required.length; i++){			  
		 var input = $('#'+required[i]);			
		 if( (input.val() == "") || (input.val() == emptyerror)){				  
		 input.addClass("needsfilled");				  
		 input.val(emptyerror);				  
		 errornotice.fadeIn(750);			
	  }
	 else {				  input.removeClass("needsfilled");			  }
		  }			  
	 if( !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){		  
		   email.addClass("needsfilled");		  
		   email.val(emailerror);	  
	  }			  
	  if ( "" == name.val()) {		  
		  name.addClass("needsfilled");		
		  name.val(emptyerror);	
	  }	
	 if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +
	$("#textarea1").val() + $("#textarea2").val()  == "") {		  
			   errornotice.fadeIn(750);		  
			   return false	
	   }	
	  if( $(":input").hasClass("needsfilled")){		
		return false;	
	   }	
	  else{errornotice.hide();return true;}	  
}

With the above changes the form submission is aborted (as expected) if the validation fails in IE, Opera and FF on windows, Chrome and safari still submits the form. I don't have direct access to my code from work, but I believe the problem is stemming from this piece of code:
if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +  $("#textarea1").val() + $("#textarea2").val()  == "") {		
			   errornotice.fadeIn(750);		
			   return false  
	   }  
if( $(":input").hasClass("needsfilled")){	  
		return false;  
	   }  

  • 0

#4 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 16 May 2012 - 06:10 AM

Don't you need $.each(...) there as the selector will return a collection / array?
if( $(":input").hasClass("needsfilled"))

$.each(collection, function(){
// use this to access the single input-element
});


  • 0

#5 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 17 May 2012 - 03:42 PM

Extremely frustrated

I can't seem to get basic functionality out of the script.
The inputs fields 'name' and 'email' both are of the class 'form-required'

This outputs nothing:
$('.form-required').each( function(index){
		   alert(index + ': ' + $(this).tagName.toLowerCase());
	   })
Nothing with this either:
$.each('.form-required',function(){
			alert( $(this).tagName.toLowerCase());
		})

Testing the code like this
alert("this far");
	   $('.form-required').each( function(index){
		   alert(index + ': ' + $(this).tagName.toLowerCase());
	   })
		$.each('.form-required',function(){
			alert( $(this).tagName.toLowerCase());
		})
	  alert("further");
only outputs "this far" -- it seems the form is submitted before
alert ("further");

I even added the input selector ":input"
alert("this far");
	   $('.form-required').each( function(index){
		   alert(index + ': ' + $(this).tagName.toLowerCase());
	   })
		$.each('.form-required',function(){
			alert( $(this).tagName.toLowerCase());
		})
		$.each(':input',function(){
			alert("here " +  $(this).tagName.toLowerCase());
		})
	  alert("further");
still no output and the form submits before
alert("further");

TIRED :closedeyes:

My lack of a formal understanding for JQuery is frustrating my efforts
  • 0

#6 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 17 May 2012 - 04:27 PM

What is amazingly surprising is basic selection does not stop the form from submitting on Chrome and Safari either.

if( $("#formname").hasClass("needsfilled") || $("#formemail").hasClass("needsfilled") )
			{
				alert("failed");
				return false;
			}
This works on Opera, IE and FF.
  • 0

#7 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 17 May 2012 - 10:25 PM

This works:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var errornotice = $("#error");
// The text to show up within a field when it is incorrect
var emptyerror = "Please fill out this field.";
var emailerror = "Please enter a valid e-mail.";

function suggestionSubmit(theform){   
  var required=["name","email"];
  var email = $("#email");	 
  var name = $("#name");	   
  var errornotice = $("#error");   
  // The text to show up within a field when it is incorrect   
  emptyerror = "Please fill out this field.";  
  emailerror = "Please enter a valid e-mail.";		   
  for(i =  0; i < required.length; i++){				   
   var input = $('#'+required[i]);					   
   if( (input.val() == "") || (input.val() == emptyerror)){								
    input.addClass("needsfilled");						  
    input.val(emptyerror);						  
    errornotice.fadeIn(750);					  
   } else {
    input.removeClass("needsfilled");					  
   }
  }					  
  if( !/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())){		   
   email.addClass("needsfilled");				
   email.val(emailerror);		
  }					  
  if ( "" == name.val()) {			   
   name.addClass("needsfilled");		
   name.val(emptyerror);
  }	
  if( $("#link1").val() + $("#link2").val() + $("#link3").val() + $("#link4").val() +
  $("#textarea1").val() + $("#textarea2").val()  == "") {		  
   errornotice.fadeIn(750);			  
   return false
  }   
  if( $(":input").hasClass("needsfilled")){			
   return false;  
  } else {
	  errornotice.hide();
   return true;
  }  
}

</script>

<style type="text/css">
  .needsfilled{
   background-color: red;
  }
</style>
</head>
<body>
<div id="error" style="display:none;">
<p>Error</p>
</div>
 
<form onsubmit="return suggestionSubmit(this);">
<label>name:<input id="name" type="text"/></label><br/>
<label>email:<input id="email" type="text"/></label><br/>
<label>textarea1:<input id="textarea1 type="textarea"/></label><br/>
<label>textarea2:<input id="textarea2" type="textarea"/></label><br/>

<label>link1:<input id="link1" type="text"/></label><br/>
<label>link2:<input id="link2" type="text"/></label><br/>
<label>link3:<input id="link3" type="text"/></label><br/>
<label>link4:<input id="link4" type="text"/></label><br/>

<input type="submit" value="submit"/>
</form>

</body>
</html>
The only thing I had to change was
email = $("#email");	 
name = $("#name");	   
errornotice = $("#error");  
You didn't put 'var' to declare it.
  • 0

#8 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 18 May 2012 - 04:50 AM

Ok. I only have access to IE8 on work, so i will check when i reach home (if the internet is working).
  • 0

#9 fread

fread

    Programming God

  • Senior Member
  • PipPipPipPipPipPip
  • 897 posts
  • Location:Trinidad and Tobago
  • Learning:C, Java, C++, C#, PHP, Python, PL/SQL

Posted 19 May 2012 - 03:08 AM

You didn't put 'var' to declare it.

Was in fact the problem. Problem Solved. Much thanks.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download