jQuery,表单验证,验证.each字段后的消息

时间:2012-02-20 13:11:50

标签: jquery forms validation each

编辑决赛:天啊,我终于发现了什么问题!我几乎无法相信,我正在测试这件8小时不停,最后......我仍然不确定是什么以及如何以及为什么,但似乎出于某种原因(我认为)我不能对于重新变量有不同的值,因为有不同的字段,1次,它用于文本,另一次用于数字,例如,如果我只为每个可能的正则表达式定义不同的变量而不是重新定义它,那里没问题! o.O

我已在此帖子的回复中发布了我现在使用的代码

非常感谢那些花时间阅读并思考这个问题的人!

如果有人对它出错的原因有所了解,我很感兴趣!


原始问题:

无法找到为什么这不会工作的逻辑..我有一个我要验证的表单,每个字段都应该在Blur上验证:工作完美,在提交时应该验证每个字段:工作完美,当有某种类型的错误,它应该显示一条消息并返回false:不起作用..由于某种原因,提交函数只是不希望在.each后做任何事情,它甚至不工作,当我不做任何检查错误,只是想要在.each之后发出警报..

编辑:在提到一些小错误之后,遗憾的是它仍然无法工作..这里是总代码,包括checkfield-function(错误消息在荷兰语中,以防你想知道;)) p>

EDIT2:经过更多测试后,似乎不是因为checkform函数,而是因为正则表达式测试(if(!re.test(fieldvalue)))导致代码卡住了...无法找到问题虽然..任何想法将不胜感激!

EDIT3:为什么不用正则表达式的checkfield函数不循环使用.each?任何人??我真的很绝望.. -.-

function trim(str){
  return str.replace(/^\s+|\s+$/g, '');
}

function checkfield(field){  

  var output = 'validate' + $(field).attr("name");
  var type = $(field).attr("type");
  if ($(field).hasClass('required')){var required = 1;}

  //set patterns for different types
  if (type == 'text') { var re = /^[A-Za-z0-9 -._]+$/;} 
  if (type == 'number') { var re = /^[\d -.]+$/;} 
  if (type == 'email') { var re = /^[\w-_.]+@[\w]+\.[\w]*\w\w$/;} 
  if (type == 'date') { var re = /^[0-3][0-9][\/-][0-1][0-9][\/-](19|20)[0-9][0-9]$/;} 

  var fieldvalue = trim(field.value); //trim value of input

  if (required == 1 && emptyString.test(fieldvalue)) { //is required field filled in? if no, return false
     $('#'+output).html('Invullen van onderstaand veld is verplicht!');

     field.focus();
     return false;  
    }

  else if (fieldvalue != "" && type != '' && !re.test(fieldvalue)) { //input according to pattern? if no: place message, return false

     if (type == 'email') {$('#'+output).html('Dit is geen correct e-mailadres!');}
     else if (type == 'date') {$('#'+output).html('Dit is geen correcte datum!');}
     else {$('#'+output).html('U gebruikt tekens die niet zijn toegestaan!');}

     field.focus(); 
     return false;
    }

  else if (fieldvalue != ""){ //when no error and filled in, empty messagebox, return true 
     $('#'+output).html('');

     return true; 
    }

  else if (required == 0 && fieldvalue == ""){//is empty but not required, empty messagebox, return true
     $('#'+output).html('');
     document.getElementById(output).innerHTML = '';
     return true;   
    }
}


$(document).ready(function(){

  $("#userform input").blur(function(){
  checkfield(this);
  })

  $("#userform").submit(function(){
    var errs = 0;
    $("#userform input").each(function(){
      if (!checkfield(this)) errs +=1;
    }); 
    if (errs>0) {alert('one or more fields are not correctly filled in'); return false;}

  })
});

新代码有效!!

如果有人喜欢使用简单的表格验证,请随意;)(空格不是很好,但那是因为我的代码编辑器有不同于本网站的规则..)

function trim(str){
  return str.replace(/^\s+|\s+$/g, '');
}

function checkfield(field){  
  var output = 'validate' + $(field).attr("name");
  var type = $(field).attr("type");

  if ($(field).hasClass('required')){var required = 1;}
  var re_text = /^[A-Za-z0-9 -._]+$/;   
  var re_number = /^[\d -.]+$/; 
  var re_email = /^[\w-_.]+@[\w]+\.[\w]*\w\w$/; 
  var re_date = /^[0-3][0-9][\/-][0-1][0-9][\/-](19|20)[0-9][0-9]$/;    
  var emptyString = /^\s*$/ ;

  var error = 0;

  var fieldvalue = trim(field.value); //trim value of input

if (required == 1 && emptyString.test(fieldvalue)) { //is required field filled in? if no, return false
   $('#'+output).html('Invullen van onderstaand veld is verplicht!');
     field.focus();
     return false;  
}

else if (!emptyString.test(fieldvalue)){
 if (type == 'text'){    
   if (!re_text.test(fieldvalue)) {       
     $('#'+output).html('U gebruikt tekens die niet zijn toegestaan!'); 
         error = 1;          
     field.focus();  
       return false;         
   }
     else {$('#'+output).html(''); return true; }    
 }

 if (type == 'number'){  
   if (!re_number.test(fieldvalue)) {     
     $('#'+output).html('U gebruikt tekens die niet zijn toegestaan!');              
     error = 1;
         field.focus();  
       return false;         
   }    
     else {$('#'+output).html(''); return true; }    
 }

 if (type == 'email'){   
   if (!re_email.test(fieldvalue)) {      
     $('#'+output).html('Dit is geen correct e-mailadres!');                 
     error = 1;
         field.focus();  
       return false;         
   }    
     else {$('#'+output).html(''); return true; }    
 }

 if (type == 'date'){    
   if (!re_date.test(fieldvalue)) {       
     $('#'+output).html('Dit is geen correcte datum!');              
     error = 1;
         field.focus();  
       return false;         
   }    
     else {$('#'+output).html(''); return true; }    
 }  
}     

else if (required == 0 && emptyString.test(fieldvalue)){//is empty but not required, empty messagebox, return true
 $('#'+output).html('');
     document.getElementById(output).innerHTML = '';
     return true;   
}

}


$(document).ready(function(){

$("#userform input").blur(function(){
checkfield(this);
})

  $("#userform").submit(function(){
var errs = 0;


$("#userform .form").each(function(){
  if (!checkfield(this)) errs +=1;
        //checkfield(this);
}); 
if (errs>0) {alert('one or more fields are not correctly filled in'); return false;}
//alert(errs); return false;

})
}); 

2 个答案:

答案 0 :(得分:0)

看起来你需要在.each()

中切换+和=
if (!checkfield(this)) errs += 1;

答案 1 :(得分:0)

正如Brad Falk指出的那样,你应该使用errs += 1而不是errs =+1。但是,还有一些其他错误。

.each()电话后你错过了分号。这是我能看到的唯一可能导致问题的原因。

除此之外,您的return false不属于if语句块,因此即使没有验证错误也始终会阻止表单提交 - 这可能是您想要的,但由于我看不到任何AJAX帖子的证据,可能会在将来引起你的问题。