Eternal Eternal - 1 year ago 36
jQuery Question

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

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("<span style='color:red;'>Επιλέξτε μια κατηγορία</span>");

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("<span style='color:red;'>Eπιλέξτε μια κατηγορία</span>");

return false;
}
else
{



$.ajax({
type: 'POST',
url: '../sendemail.php',
dataType: 'json',
data: {
Name: name,
Email: email,
message: Message,
formCategory : formCat

},

beforeSend: function () {



complete.html('<i class="material-icons w3-spin w3-text-indigo" style="font-size:36px">toys</i> Αποστολή <i class="w3-text-indigo material-icons w3-spin" style="font-size:36px">toys</i>').fadeIn();
}


})//end ajax

.done(

function (data) {

if(data.MessageSent)
{
//if phpmailer sent is true
complete.html("<div id='msgSent' class='w3-panel w3-green w3-display-container'>\n\
<span class='w3-button w3-green w3-large w3-display-topright' onclick='closemsg()'>x</span>\n\
<h3>Μήνυμα εστάλη με επιτυχία! <i style='font-size:33px;' class='material-icons'>done</i></h3> <p>Ευχαριστούμε για το μήνυμα σας. Θα το διαβάσουμε σύντομα και θα σας απαντήσουμε\n\
στο ακόλουθο email: <span class='w3-tag w3-indigo w3-hover-text-indigo w3-hover-white w3-round '>"+email+"</span></p> </div>");



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("<div id='msgSent' class='w3-panel w3-red w3-display-container'><span class='w3-button w3-red w3-opacity w3-large w3-display-topright' \n\
onclick='closemsg()'>x</span><h3>Αποτυχία αποστολής μηνύματος <i style='font-size:33px;' class= ' material-icons'>error_outline</i> </h3> \n\
<p>Δυστηχώς το μήνυμα σας δεν εστάλη με επιτυχία. Παρακαλώ εποικηνωνήστε μαζί μας μέσω facebook στον ακόλουθο σύνδεσμο: <a target='_blank' \n\
class='w3-tag w3-white' href='https://m.me/graftingInCyprus'>εδώ</a><br>Το Μήνυμα σας: <span class='w3-indigo w3-tag '>"+Message+"</p> </div>");
}
} //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;}


<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<form id="contact" method="post" action="#ss">

<div id="formAppend"></div>
<input type="text" id="fname" name="firstname" placeholder="Το Όνομα σας..." >
<input type="email" id="email" name="email" placeholder="Το Εmail σας..." >




<select id="formCategory" >

<option id="fc" class="w3-center" value="" selected value>-- Κατηγορία --</option>
<option value="Εμβολιασμός">Εμβολιασμός</option>
<option value="Δέντρα">Δέντρα</option>
<option value="Φύση">Φύση</option>
<option value="Άλλη">Άλλη</option>

</select>


<style>

#op{

text-align : center;

} </style>



<textarea id="msg" name="message" placeholder="Γράψε το μήνυμα..." style="height:200px;max-height:400px;min-height:100px;" ></textarea>
<div id="op">


<button type="submit" style="" class="w3-button w3-indigo w3-round-medium w3-hover-amber "> Αποστολή</button> </div>

</form>




Answer Source

You don't need the return statements. Also, you don't need the following if statement:

if(email ==="" && Message ==="" && formCat ==="" && name==="" )

Just add if statements as you are doing fine, and use an else statement to proceed to the ajax as soon as their is nothing empty when the form is submitted.

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(name==="")
{
    $("#fname").css({"border": "3px solid red"});
    $("#fname").attr("placeholder", "Ξεχάσατε το όνομα σας").css({"font-weight":"bold"});

}



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

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

            beforeSend: function () {
		


complete.html('<i class="material-icons w3-spin w3-text-indigo" style="font-size:36px">toys</i>  Αποστολή  <i class="w3-text-indigo material-icons w3-spin" style="font-size:36px">toys</i>').fadeIn();			              		     
          }
			
		
        })//end ajax
        
         .done(

        function (data) {

if(data.MessageSent)
{ 
  //if phpmailer sent is true
   complete.html("<div id='msgSent' class='w3-panel w3-green w3-display-container'>\n\
<span  class='w3-button w3-green w3-large w3-display-topright' onclick='closemsg()'>x</span>\n\
<h3>Μήνυμα εστάλη με επιτυχία! <i style='font-size:33px;' class='material-icons'>done</i></h3> <p>Ευχαριστούμε για το μήνυμα σας. Θα το διαβάσουμε σύντομα και θα σας απαντήσουμε\n\
 στο ακόλουθο email: <span class='w3-tag w3-indigo w3-hover-text-indigo w3-hover-white w3-round '>"+email+"</span></p> </div>");
                
                
		                           
                        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("<div id='msgSent' class='w3-panel w3-red w3-display-container'><span  class='w3-button w3-red w3-opacity w3-large w3-display-topright' \n\
onclick='closemsg()'>x</span><h3>Αποτυχία αποστολής μηνύματος <i style='font-size:33px;' class= ' material-icons'>error_outline</i> </h3> \n\
 <p>Δυστηχώς το μήνυμα σας δεν εστάλη με επιτυχία. Παρακαλώ εποικηνωνήστε μαζί μας μέσω facebook στον ακόλουθο σύνδεσμο: <a target='_blank' \n\
class='w3-tag w3-white' href='https://m.me/graftingInCyprus'>εδώ</a><br>Το Μήνυμα σας: <span class='w3-indigo w3-tag '>"+Message+"</p> </div>");
}
                 } //end function data      
                 );//end done function
               

 }                  

});//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;}
        
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


        <form  id="contact" method="post" action="#ss">
    
      <div id="formAppend"></div>
    <input type="text"  id="fname" name="firstname" placeholder="Το Όνομα σας..." >
    <input type="email" id="email" name="email" placeholder="Το Εmail σας..."  >

 
 
    
  <select  id="formCategory"   >
       
<option id="fc" class="w3-center" value=""  selected value>-- Κατηγορία --</option>
      <option value="Εμβολιασμός">Εμβολιασμός</option>
      <option value="Δέντρα">Δέντρα</option>
      <option value="Φύση">Φύση</option>
      <option value="Άλλη">Άλλη</option>

    </select>
 

<style>
 
#op{
	
	text-align : center;
	
} </style>

    
	
    <textarea id="msg" name="message" placeholder="Γράψε το μήνυμα..." style="height:200px;max-height:400px;min-height:100px;" ></textarea>
<div id="op">
    

  <button type="submit"  style="" class="w3-button w3-indigo w3-round-medium w3-hover-amber "> Αποστολή</button> </div>
  
  </form>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download