Champs de vérification de validation de formulaire via le tableau

Question

Je commence par jQuery et essaye de me sauver beaucoup de code dans une validation de formulaire. J'ai pensé à mettre tous les champs de formulaire dans un tableau, utilisez each() pour faire une boucle dans le tableau pour voir si les champs sont vides et renvoyer des erreurs (si nécessaire).

Un problème; mon approche ne fonctionne pas ..

J'utilise la méthode suivante

    var fields = [ "$('#name')", "$('address')" ]; 
    jQuery.each(fields,function(){ 
     if(this.val() == ""){ 
     alert(this.id+" is empty"); 
     return false; 
     } 
    }); 

Bien sûr, je peux vérifier tous les champs séparément, mais parce que j'ai beaucoup de formes, ce serait un code assez grand. Mes pensées sont-elles même possibles, et si oui, comment?

Ok, le problème ci-dessus est résolu parfaitement, mais je maintenant un nouveau

Une fois que j'ai vérifié tous les champs si elles sont vides, je veux vérifier si un e-mail valide est entré. J'utilise le code suivant:

    $("#reservationForm").live("submit", function(f){ 
    $(".formError").hide(); 
    if(!$('#agree').is(':checked')){ 
     $("#agree").after('You need to agree with the terms on the right'); 
     f.preventDefault(); 
    }else{ 
     $("#reservationForm").find("input[type=email], input[type=tel], input[type=text]").filter(function(){ 
     if($(this).val() == ""){ 
     $(this).css("border","solid 1px red").after('Please fill in your '+this.id+''); 
     $(this).find("first-child").focus(); 
     f.preventDefault(); 
     }else if(!/\b[A-Z0-9._%+-]+@(?:[A-Z0-9-]+\.)+[A-Z]{2,4}\b/.test($("#mail").val())){ 
     $("#mail").css("border","solid 1px red").after('Please enter a valid email address'); 
     } 
     }); 
    } 
    }); 

Le problème est que la frontière ne devient pas rouge et le message qui doit être affiché après le champ e-mail n'est pas affiché. Seul le champ email est ciblé, rien d'autre.

Oh, et j'ai en fait un autre 'problème' aussi parce que le sélecteur premier-enfant ne semble pas fonctionner. Au lieu du premier élément, le dernier élément est focalisé. (J'ai aussi essayé last-child, mais cela n'a pas fait l'affaire ..)

Answer 1

Comment de trouver s'il y a des éléments vides sous la forme:

var emptyElements = $('#formId') 
    .find(':text, :radio, :checkbox, select') 
    .filter(function() { 
     var isEmpty = $(this).val() == ''; 
     if (isEmpty) { 
      alert(this.id + ' is empty'); 
     } 
     return isEmpty; 
    }); 
if (emptyElements.length > 0) { 
    return false; 
} 

Le jQuery validation plugin vaut également le coup d'œil.

Answer 2

Enlever le '' 'dans le tableau Vous voulez stocker la référence à l'élément, pas une chaîne ;-)

aussi, jetez un oeil à:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Il est un grand et simple à utiliser plugin forme jQuery Oh, et vous voudrez peut-être changer .val() pour .attr («valeur! ") (bien que val puisse être valide, je ne suis pas sûr)

Oh, et si cela ne marche toujours pas « T travail essayer $ (this) au lieu de tout cela, pas à 100% sur la façon gère jQuery ce sur $ (this)

Answer 3

$.each($('form').serializeArray(), function(i, field) { 
    if (field.value.length == 0 || field.value.match('regex of invalid syntax')) { 
     // handle invalid data properly. 
    } 
})