More efficient way to write this javascript

Question

I create a contact form for my site and use javascript for the first level of verification before submitting, which is then verified again with php, but I'm relatively new to javascript, here is my 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("YAY"); } }); 

How can I write this more efficiently and give a warning if all the fields are filled, thanks.

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

The glavic and matt answers were exactly what I was going to offer, except that I would take another step, separating the logic from the presentation.

Define the classes defined in your css when the field contains an invalid entry and add or remove this class using $.addClass() or $.removeClass()

Answer 3

Since you are using jQuery, I would recommend setting a class for each field that requires a non-empty value (class = "required").

Then you do something like this:

 var foundEmpty = false; $(".required").each(function() { if($(this).val()) { foundEmpty=true; $(this).style("background-color", "red"); } }); if(foundEmpty) { alert("One or more fields require a value."); } 

Answer 4

Providing them with a common class, defining classes for applying styles, and doing this:

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

 <button id="send">SEND</button><br> <input class="validate"><br> <input class="validate"><br> <input class="validate"><br> <input class="validate"> 

---

JSFIDDLE DEMO

---

A slightly more efficient approach:

 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

You can use jQuery to iterate over each object and get their values. Depending on your form, this code will change, but it will give you an example. I probably am missing in a few brackets here and there, but the concept is there.

 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 + 'is empty'); } }); 

Answer 6

I would probably split some of this into my css file. If any of the fields is empty, add a class, for example, "empty" to the object; if not, delete it. Then in your css file you can add some descriptors, for example:

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

You can use jQuery addClass () and removeClass ().

Then you can add a loop like this:

 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) { } 

EDIT:

There you go, fixed it for you.