Validation de formulaire jQuery personnalisée - Quelle est la meilleure façon?

Question

Je veux créer un script de validation de formulaire jQuery personnalisé pour m'aider à mieux connaître jQuery et ses meilleures pratiques. Mais dès que j'ai commencé, je me suis retrouvé avec plus de questions que de solutions. Je sais qu'il y a le plugin de validation jQuery, et un tas d'autres plugins tiers, mais c'est quelque chose que je voulais créer à partir de zéro.

Ma première tentative donne quelque chose comme ci-dessous. Cela fonctionne très bien, mais il semble que beaucoup de code pour valider fondamentalement le même type d'entrée déposée tout le long du formulaire.

$(".validation").submit(function(){ 
    if($(".name").val() === ""){ 
    $(".name").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid name</p>").slideDown(); 
    return false; 
    }if($(".address1").val() === ""){ 
    $(".address1").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid address</p>").slideDown(); 
    return false; 
    }if($(".city").val() === ""){ 
    $(".city").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid city</p>").slideDown(); 
    return false; 
    }if($(".state").val() === "0"){ 
    $(".state").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid state</p>").slideDown(); 
    return false; 
    }if($(".zipCode").val() === ""){ 
    $(".zipCode").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid zip code</p>").slideDown(); 
    return false; 
    }if($(".phone").val() === ""){ 
    $(".phone").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid phone</p>").slideDown(); 
    return false; 
    }if($(".email").val() === "" || ! /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test($(".email").val())){ 
    $(".email").addClass("error"); 
    $(".errorMessage").html("<p>Error: Please enter a valid email</p>").slideDown(); 
    return false; 
    } 
}); 

Ma deuxième tentative a donné quelque chose comme ceci ci-dessous. Cela réduit toutes les instructions if mais avec un événement qui bouillonne, il valide la forme en arrière. Il ajoute également un seul message d'erreur avec à la fois $(".errorMessage").html("There was an error" + " " + name);. Serait-il possible d'afficher ce message d'erreur pour chaque champ de formulaire vide en même temps plutôt qu'un à la fois? J'ai un CodePen demo de ce travail. Toutes les suggestions sur la technique ou les meilleures pratiques seraient grandes.

$("form").on("submit", function(e){ 
    $("input").each(function(){ 

    var name = $(this).attr("name"); 

    if($(this).val() == ""){ 
     $(".errorMessage").html("There was an error" + " " + name); 
     e.preventDefault(); 
    }else{ 
     return true; 
    } 
    }); 
}); 

Merci,

JB

Answer 1

Oui, il est possible. Si vous voulez faire cela, vous devrez décider exactement comment vous voulez montrer ces erreurs. Certaines personnes placeront chaque erreur dans un élément de liste avec un type d'en-tête avant la liste, tel que "Veuillez corriger les erreurs suivantes:". Ensuite, vous devez créer un élément li, définir son texte sur l'erreur et l'ajouter à votre objet liste ul.

Vous pouvez également faire un certain type de création de phrases pour créer une phrase en anglais qui indique à l'utilisateur ce qui ne va pas, mais je préfère généralement l'option list. Honnêtement, il y a un nombre infini de façons de le faire.

J'espère avoir bien compris votre question, laissez-moi savoir si ce n'est pas le cas.

Edit: Voici un exemple rapide et sale, tiré de votre exemple: http://codepen.io/anon/pen/hJdtD

Answer 2

Concept général Exemple.

Adds a validation method that checks if a given value equals the addition of the two parameters. 

jQuery.validator.addMethod("math", function(value, element, params) { 
return this.optional(element) || value == params[0] + params[1]; 
}, jQuery.format("Please enter the correct value for {0} + {1}")); 

Méthode personnalisée Exemple:

jQuery.validator.addMethod("greaterThanZero", function(value, element) { 
return this.optional(element) || (parseFloat(value) > 0); 
}, "* Amount must be greater than 0"); 

$('validatorElement').validate({ 
rules : { 
    amount : { greaterThanZero : true } 
} 
}); 

Source http://docs.jquery.com/Plugins/Validation/Validator/addMethod