How to validate form inputs at once (Not one by one)

Question

I have the following contact form as below. I want to avoid one by one form validation and display all the error messages at once.

I am using too many if statements to do that, but the validation happens one by one.

For example, when the user submits the form without entering the name and email both errors should appear at once (name is missing, email is missing). Not the name first and then the email.

Sorry for the example is in greek language I hope browser translator will work.

var form = $('#contact');
form.submit(function (event) {
 event.preventDefault();
  var complete = $('#formAppend');
  

   // var $form = $(this);

var name= $("#fname").val();
var email= $("#email").val();
var Message = $("#msg").val();
var formCat = $("#formCategory").val();

if(email ==="" && Message ==="" && formCat ==="" && name==="" )
{
    
    $("#fname").css({"border": "3px solid red"});
    $("#fname").attr("placeholder", "Ξεχάσατε το όνομα σας").css({"font-weight":"bold"});
    
     $("#email").css({"border": "3px solid red"});
    $("#email").attr("placeholder", "Ξεχάσατε το email σας").css({"font-weight":"bold"});
    
    $("#msg").css({"border": "3px solid red"});
    $("#msg").attr("placeholder", "Το μήνυμα σας είναι υποχρεωτικό").css({"font-weight":"bold"});
    
     $("#formCategory").css({"border": "3px solid red"});
    $("#fc").html("Επιλέξτε μια κατηγορία");
    
   return false;
}

if(name==="")
{
    $("#fname").css({"border": "3px solid red"});
    $("#fname").attr("placeholder", "Ξεχάσατε το όνομα σας").css({"font-weight":"bold"});
  
    return false;
}



if(email ==="")
{
    $("#email").css({"border": "3px solid red"});
    $("#email").attr("placeholder", "Ξεχάσατε το email σας").css({"font-weight":"bold"});
  
    return false;
}

if(Message ==="")
{
    $("#msg").css({"border": "3px solid red"});
    $("#msg").attr("placeholder", "Το μήνυμα σας είναι υποχρεωτικό").css({"font-weight":"bold"});
  
    return false;
}
if(formCat ==="")
{
    $("#formCategory").css({"border": "3px solid red"});
    $("#fc").html("Eπιλέξτε μια κατηγορία");
  
    return false;
}
else 
{
    
    
    
 $.ajax({
            type: 'POST',
            url: '../sendemail.php',
            dataType: 'json',
            data: {
                Name: name,
                Email: email,
                message: Message,
                formCategory : formCat
                
            },

            beforeSend: function () {
  


complete.html('toys  Αποστολή  toys').fadeIn();                        
          }
   
  
        })//end ajax
        
         .done(

        function (data) {

if(data.MessageSent)
{ 
  //if phpmailer sent is true
   complete.html("
\
x
\
Μήνυμα εστάλη με επιτυχία! done
 Ευχαριστούμε για το μήνυμα σας. Θα το διαβάσουμε σύντομα και θα σας απαντήσουμε
\
 στο ακόλουθο email: "+email+"
 ");
                
                
                             
                        document.getElementById("fname").value = "";             
          document.getElementById("email").value = "";
                        document.getElementById("formCategory").value = "";
                        document.getElementById("msg").value = "";
                        
     $("#fname").css({"border": "1px solid #ccc"});
    $("#fname").attr("placeholder", "Το Όνομα σας...").css({"font-weight":"normal"});
    
     $("#email").css({"border": "1px solid #ccc"});
    $("#email").attr("placeholder", "Το Εmail σας...").css({"font-weight":"normal"});
    
    $("#msg").css({"border": "1px solid #ccc"});
    $("#msg").attr("placeholder", "Γράψε το μήνυμα...").css({"font-weight":"normal"});
    
     $("#formCategory").css({"border": "1px solid #ccc"});
    $("#fc").html("-- Κατηγορία --").css({"font-weight":"normal"});
}
else {//if phpmailer sent is false
   
      complete.html("xΑποτυχία αποστολής μηνύματος error_outline  
\
 Δυστηχώς το μήνυμα σας δεν εστάλη με επιτυχία. Παρακαλώ εποικηνωνήστε μαζί μας μέσω facebook στον ακόλουθο σύνδεσμο: εδώ
Το Μήνυμα σας: "+Message+"
 ");
}
                 } //end function data      
                 );//end done function
               
 return true;
 }                  

});//end contact form


function closemsg()
{
    $('#msgSent').hide();
}

input[type=text], input[type=email], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}
style.css:1
button, select {
    text-transform: none;
}
style.css:1
button, input, select, textarea {
    font: inherit;
    margin: 0;}

How to validate form inputs at once (Not one by one)

1 Answers