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="[email protected]" 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?

You should try assigning each input's value into variables and debugging them. — Disorder
– Disorder, Commented Feb 20, 2017 at 10:39
jqueryvalidation.org ...use this for all jquery validations.... an example of the same is here sitepoint.com/basic-jquery-form-validation-tutorial — Nikita Dhiman
– Nikita Dhiman, Commented Feb 20, 2017 at 10:55

Janar · Accepted Answer · 2017-02-20 10:57:39Z

2

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

answered Feb 20, 2017 at 10:57

Janar

2,7111 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xGeo · Accepted Answer · 2017-02-20 12:35:28Z

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

answered Feb 20, 2017 at 12:35

xGeo

2,1492 gold badges20 silver badges47 bronze badges

Comments

Omari Victor Omosa · Accepted Answer · 2017-02-20 11:37:15Z

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>

Collectives™ on Stack Overflow

JQuery Form Validation to check fields in multiple steps

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related