Question

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 validations failed. On linux the script works fine in FF, Chrome and Opera. On windows the script fails and the forms is submitted on Chrome, Safari and IE. Your thoughtswill 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");
        }
    })    
});





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;}     
}
Was it helpful?

Solution

You can try to write smth like that

$(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(event){
     //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")
         event.preventDefault();
         return false;
     }
     if( $(":input").hasClass("needsfilled")){
         alert("returning fail here")
         event.preventDefault();
         return false;
     }else{errornotice.hide();return true;}      
});   

Hope it helps.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top