jQuery, проверка формы, сообщение после проверки .each поля - PullRequest
1 голос
/ 20 февраля 2012

РЕДАКТИРОВАТЬ ФИНАЛ: О боже, я наконец-то узнал, что идет не так !!я почти не могу поверить, я тестирую эту пьесу в течение 8 часов без остановки, и, наконец, ...... я все еще не уверен, что и как, и почему, но кажется, что по какой-то причине (я думаю) я не могуимеют разные значения для переменной, потому что есть разные поля, 1 раз, для текста и другое время для числа, например, если я просто определяю разные переменные для каждого возможного регулярного выражения вместо его переопределения,не проблема!oO

Я отправил код, который я сейчас использую, в ответ на это сообщение

Большое спасибо всем, кто потратил некоторое время на чтение и размышления об этом !!

если у кого-то есть идеи о том, почему это пошло не так, мне очень интересно!


оригинальный вопрос:

не могу найти логику, почему это не сработает .. У меня есть форма, которую яесли хотите проверить, каждое поле должно быть проверено onBlur: отлично работает, при отправке оно должно проверять каждое поле: отлично работает, когда есть какая-то ошибка, оно должно показать сообщение и вернуть false: не работает .. по какой-то причине, функция submit просто не хочет ничего делать после .each, она даже не будет работать, когда я не проверяю ошибки, и просто хочу оповещение после .each ..

EDIT: послеупоминает о некоторых небольших ошибках, но, к сожалению, все еще не работает .. вот полный код, включая функцию checkfield (сообщения об ошибках на голландском языке, если вам интересно;))

EDIT2: после дополнительного тестирования, кажется, это не из-за функции checkform, а как-то связанное с тестом регулярных выражений (if (! Re.test (fieldvalue)))), который застревает в коде, хотя не может найти проблему ..любые мысли будут высоко ценится!

РЕДАКТИРОВАТЬ3: почему функция проверки полей с регулярным выражением не цикл с .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 голосов
/ 20 февраля 2012

Как заметил Брэд Фальк, вы должны использовать errs += 1 вместо errs =+1.Однако есть и несколько других ошибок.

Вам не хватает точки с запятой после вызова .each().Это единственное, что я вижу, что может вызвать вашу проблему.

Кроме того, ваш return false не является частью блока операторов if, поэтому он всегда будет препятствовать отправке формы, даже когданет ошибок проверки - это может быть то, что вы хотите, но, поскольку я не вижу никаких доказательств публикации сообщения AJAX, это может вызвать проблемы в будущем.

0 голосов
/ 20 февраля 2012

Похоже, вам нужно переключаться между + и = в вашем .each ()

if (!checkfield(this)) errs += 1;
...