lordf lordf - 18 days ago 5
jQuery Question

Validation between 3 steps in form

I have a form divided in 3 different steps.

I want two different things:


  1. Focus in input in steps 2 and 3

  2. Validation for non-empty fields in steps 1 and 2



This is my code:



window.onload = function() {
document.getElementById("i_am").focus();
};

var form = document.getElementById('register');
form.noValidate = true;
form.addEventListener('submit', function(event) {

if (!event.target.checkValidity()) {
event.preventDefault();
document.getElementById('youremailidMsg').innerHTML = document.getElementById('email_id').value == '' ? 'Please enter your email' : '';
}

}, false);

var questionNumber=0;
var questions=document.querySelectorAll('.notshown');
function next(){
questionNumber++;

if(questions.length>questionNumber)
{
document.querySelector('.shown').classList.remove('shown');
questions[questionNumber].classList.add('shown');

}

}

.notshown {
display: none;
}

.shown {
display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form class="" id="register" method="POST" action="" >

<div id="q0" class="notshown shown form-group">
<div class="form-group">
step 1
<select id="i_am" class="form-control">
<option value="">Choose your gender</option>
<option value="1-1">Men</option>
<option value="1-2">Woman</option>
</select>
</div>
<a class="btn btn-danger" onclick="next()">NEXT</a>
</div>

<div id="q1" class="notshown form-group">
<div class="form-group">
step 2
<input class="form-control" id="province_id" placeholder="City name" required="required">
</div>
<a class="btn btn-danger" onclick="next()" type="submit">NEXT</a>
</div>

<div id="q2" class="notshown">
<div class="form-group">
step 3
<input type="text" id="email_id" placeholder="Your email" required="required">
<div id="youremailidMsg"></div>
</div>
<button type="submit" class="btn btn-danger" >REGISTER</button>
</div>

</form>





Run here

https://jsfiddle.net/h7v94mxz/9/

Answer

So, I rewrote this using jQuery since you included the jQuery library in your question, as well as in the fiddle you provided.

Keep in mind, I did not take the time to make this bullet-proof from a validation standpoint, but I think you should be able to take what I have and build on it.

Let me know if you have any questions.

  var questionNumber = -1;
  var questions = $('.notshown');
  var inputSelector = "input:not(:disabled):not([readonly]), textarea:not(:disabled):not([readonly]), select:not(:disabled):not([readonly])";
  var form = $('#register');

  form.on("input change propertychange", inputSelector, function() {
    validateInput(this);
  });

  function validateInput(control) {
    var $control = $(control);
    if ($control.is("div")) {
      $control.find(inputSelector).each(function() {
        validateInput(this);
      });
    } else {
      $control.removeClass("invalid-input");
      $control.siblings(".error-message").remove();
      if ($control.val() === "") {
        $errorMessage = $("<span/>");
        $errorMessage.addClass("error-message");
        $errorMessage.text("Value cannot be empty!");
        $control.addClass("invalid-input");
        $errorMessage.insertAfter($control);
      }
    }
  }

  function next() {
    var question = $(questions[questionNumber]);
    validateInput(question);
    if (question.find(".invalid-input").length) {
      // contains invalid inputs, do not proceed
      return false;
    } else {
      questionNumber++;
      question = $(questions[questionNumber]);
      if (questions.length > questionNumber) {
        $('.shown').removeClass('shown');
        question.addClass('shown');
        // focus first input in group
        question.find(inputSelector)[0].focus();
      } else {
        console.log('submitting!');
        form.submit();
      }
    }
  }

  next();
.notshown {
  display: none;
}
.shown {
  display: block;
}
.invalid-input {
  border: 1px solid red !important;
  background-color: pink !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="" id="register" method="POST" action="">

  <div id="q0" class="notshown form-group">
    <div class="form-group">
      step 1
      <select id="i_am" class="form-control">
        <option value="">Choose your gender</option>
        <option value="1-1">Men</option>
        <option value="1-2">Woman</option>
      </select>
    </div>
    <a class="btn btn-danger" onclick="next()">NEXT</a>
  </div>

  <div id="q1" class="notshown form-group">
    <div class="form-group">
      step 2
      <input class="form-control" id="province_id" placeholder="City name" required="required">
    </div>
    <a class="btn btn-danger" onclick="next()" type="submit">NEXT</a>
  </div>

  <div id="q2" class="notshown">
    <div class="form-group">
      step 3
      <input type="text" id="email_id" placeholder="Your email" />
      <div id="youremailidMsg"></div>
    </div>
    <a type="submit" onclick="next()" class="btn btn-danger">REGISTER</a>
  </div>
</form>