JQuery Form Validation to check fields in multiple steps

Question

I have this structure:

<form action="/action_page.php" method="get">
     <fieldset class="row row-1 active-slide">
          <div class="form-group">
              <label class="question">Initialen</label>
              <input type="text" name="1" aria-invalid="false" placeholder="J." class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Tussenvoegsel</label>
              <input type="text" name="2" aria-invalid="false" placeholder="Van" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Achternaam</label>
              <input type="text" name="3" aria-invalid="false" placeholder="Pijperzele" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Geslacht</label>
              <div class="radio-inline">
                <label>
                  <input type="radio" name="4" value="Mannelijk"><span>Mannelijk</span>
                </label>
              </div>
              <div class="radio-inline">
                <label>
                  <input type="radio" name="4" value="Vrouwelijk"><span>Vrouwelijk</span>
                </label>
              </div>
            </div>
            <div class="form-group">
              <label class="question">Geboortedatum</label>
              <input type="text" name="6" aria-invalid="false" placeholder="DD-MM-YYYY" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">Telefoonnummer</label>
              <input type="text" name="7" aria-invalid="false" placeholder="00 0000 000" class="form-control">
            </div>
            <div class="form-group">
              <label class="question">E-mailadres</label>
              <input type="text" name="8" aria-invalid="false" placeholder="name@domain.nl" class="form-control">
            </div>
     <fieldset class="row row-2">
     <fieldset class="row row-3">
     <fieldset class="row row-4">

and I need to check that all the fields are not empty but before the click of the submit button. I created multiple steps and I want to check it at the end of each step.

I wrote this IF:

if ($('input[name="1"]').val() == '' && $('input[name="2"]').val() == '' && $('input[name="3"]').val() == ''){
                        alert('complete all');

But it doesn't work correctly because if one of the fields are with a value it doesn't work(the behaviour is like a OR). What is wrong?

Answer 1

It seems that you want to validate your form before submitting.

Your options: (1) use jquery validation plugin or (2) improve your validation logic

1st method:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>

here's a working fiddle

Notice the additional required attribute in your input fields

2nd method (update validation logic): fiddle

Answer 2

If you would want to go step by step you could simply do this. I have captured some of your inputs and created a demo

$(function(){

    $(document).on("click", ".submit_btn", function(e) {
    e.preventDefault();
    	
    var one = $("#one").val();
    var two = $("#two").val();
    var three = $("#three").val();

    if (one==''){alert("Please enter one");}
    else if (two==''){alert("Please enter two");}
    else if (three==''){alert("Please enter three");}
    else {
                alert("You are good to go!");
                //do your thing here e.g send value using ajax
    		    //Built a url to send
          var info = $("#form_id").serialize();
    		  $.ajax({
    			type: "POST",
    			url: "action_page.php", //url to send your data
    			data: info,
    			success: function(result){
    				  $('#result').html(result); 
    	
    			}
    		});
    		e.preventDefault();	
}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<form action="/action_page.php" id="form_id" method="get">
       <div class="form-group">
        <label class="question">Initialen</label>
        <input id="one" type="text" name="1" aria-invalid="false" placeholder="J." class="form-control">
        </div>
        <div class="form-group">
         <label class="question">Tussenvoegsel</label>
         <input id="two" type="text" name="2" aria-invalid="false" placeholder="Van" class="form-control">
         </div>
         <div class="form-group">
          <label class="question">Achternaam</label>
          <input id="three" type="text" name="3" aria-invalid="false" placeholder="Pijperzele" class="form-control">
         </div>   
         <input class="submit_btn" type="button" value="submit"> 
</form>
<div id="result"></div>

Answer 3

Your IF-condition isn't working properly because you are checking whether all of the inputs are empty and if one of them isn't it wont go into it.

You should use OR instead of AND - that way it checks whether at least one of the input is empty

Example code:

if ($('input[name="1"]').val() == '' || $('input[name="2"]').val() == '' || $('input[name="3"]').val() == ''){
   alert('complete all');
}