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

Je diviserais probablement une partie de cela dans mon fichier css. Si l'un des champs est vide, ajoutez une classe comme "empty" à l'objet, sinon, supprimez-la. Ensuite, dans votre fichier css, vous pouvez ajouter quelques descripteurs comme :

input#fullname,
input#email {
   ...
}

input#fullname.empty,
input#email.empty {
    ...
}

Vous pouvez utiliser jQuery addClass() et removeClass().

Vous pouvez alors ajouter une boucle comme suit :

var inputs = new Array();
inputs[0] = "input#fullname";
inputs[1] = "input#email";
inputs[2] = "input#subject";
inputs[3] = "textarea#message";
var complete = true;
for (var i = 0; i < 4; i++) {
    var value = $(inputs[0]).val();
    if (value.length > 0) {
        $(inputs[i]).removeClass("empty");
    } else {
        complete = false;
        $(inputs[i]).addClass("empty");
    }
}
if (complete) {
}

MODIFIER :

Voilà, je l'ai corrigé pour vous.