8 replies to this topic

[fread]

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");
		}
	})  
});

[papabear]

can you also post your html form where you use this? The problem might be there. Because your javascript code should work

[fread]

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;  
	   }  

[wim DC]

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
});

[fread]

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

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

[fread]

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.

[wim DC]

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.

[fread]

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

[fread]

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

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