Moyen plus efficace d'écrire ce javascript

Question

Je crée un formulaire de contact pour mon site web et j'utilise du JavaScript pour la première couche de validation avant de l'envoyer, puis vérifié à nouveau via php mais je suis relativement nouveau en JavaScript, voici mon script...

$("#send").click(function() {
    var fullname = $("input#fullname").val();
    var email = $("input#email").val();
    var subject = $("input#subject").val();
    var message = $("textarea#message").val();
    if (fullname == ""){
        $("input#fullname").css("background","#d02624");
        $("input#fullname").css("color","#121212");
    }else{
        $("input#fullname").css("background","#121212");
        $("input#fullname").css("color","#5c5c5c");
    }
    if (email == ""){
        $("input#email").css("background","#d02624");
        $("input#email").css("color","#121212");
    }else{
        $("input#email").css("background","#121212");
        $("input#email").css("color","#5c5c5c");
    }
    if (subject == ""){
        $("input#subject").css("background","#d02624");
        $("input#subject").css("color","#121212");
    }else{
        $("input#subject").css("background","#121212");
        $("input#subject").css("color","#5c5c5c");
    }
    if (message == ""){
        $("textarea#message").css("background","#d02624");
        $("textarea#message").css("color","#121212");
    }else{
        $("textarea#message").css("background","#121212");
        $("textarea#message").css("color","#5c5c5c");
    }
    if (name && email && subject && message != ""){
        alert("YES");
    }
});

Comment puis-je écrire cela de manière plus efficace et faire en sorte que l'alerte s'affiche si tous les champs sont remplis, merci.

Answer 1

$("#send").click(function() {
    var failed = false;

    $('input#fullname, input#email, input#subject, textarea#message').each(function() {
        var item = $(this);
        if (item.val()) {
            item.css("background","#121212").css("color","#5c5c5c");
        } else {
            item.css("background","#d02624").css("color","#121212");
            failed = true;
        }
    });

    if (failed){
        alert("YAY");
    }
});

Answer 2

Les réponses de Glavic et Matt étaient exactement ce que j'allais suggérer, sauf que je pousserais les choses un peu plus loin en séparant la logique de la présentation.

Ayez des classes définies dans votre CSS pour quand un champ contient une entrée invalide, et ajoutez ou supprimez cette classe en utilisant $.addClass() ou $.removeClass()

Answer 3

Depuis que vous utilisez jQuery, je recommanderais de définir une classe sur chaque champ nécessitant une valeur non vide (class="required").

Ensuite, vous pouvez faire quelque chose comme ceci :

var foundEmpty = false;
$(".required").each(function()
{
   if($(this).val())
   {
       foundEmpty=true;
       $(this).style("background-color", "red");
   }
});
if(foundEmpty)
{
  alert("Un ou plusieurs champs nécessitent une valeur.");
}

Answer 4

En leur donnant une classe commune, définissez les classes à appliquer aux styles, et faites ceci:

JS

$("#send").click(function() {
    $('.validate').attr("class", function() {
        return $(this).val() === "" ? "validate invalid" : "validate valid";
    });
    if( $('.invalid').length === 0 ) {
        alert('YAY');
    }
});

CSS

.valid {
    background:#121212;
    color:#5c5c5c
}

.invalid {
    background:#d02624;
    color:#121212;
}

HTML

SEND

---

DEMO JSFIDDLE

---

Une approche un peu plus efficace:

var validate = $('.validate');

$("#send").click(function() {
    validate.attr("class", function() {
        return $(this).val() === "" ? "validate invalid" : "validate valid";
    });
    if( validate.filter('.invalid').length === 0 ) {
        alert('YAY');
    }
});

Answer 5

Vous pouvez utiliser jQuery pour itérer sur chaque objet et obtenir leurs valeurs. Selon votre formulaire, ce code va changer, mais c'est pour vous donner un exemple. Il me manque probablement quelques crochets ici et là mais le concept est là.

var objectName=$(this).attr('id');    
$('#formId').children().each(
        function(){

            if ($(this).value == ""){
                 $(this).css("background","#d02624");
                 $(this).css("color","#121212");
                 $error[objectName]='true';

            }else{
                 $(this).css("background","#121212");
                 $(this).css("color","#5c5c5c");
                 $error[objectName]='false';
            }

        }
    );
           $.each(error, function(key, value){

                if (value=='false'){
                  alert (key + 'est vide');
                }
           });