Step form validation

Question

I created a step form using javascript and php. The form has three steps. Step1 has two buttons B1 and Next, step2 also has two buttons B2 and Next, finally step3 has two buttons - B3 and Submit. Now I want to add validation to the form using javascript (JQuery), so as to make sure that buttons B1, B2 and B3 are clicked before clicking Submit.

Important Note: The page reloads every time you press Next, thus after coming to step3 when you check whether button B1 was clicked in step1 using below code

document.getElementById('B1').onclick = function() {
   alert("button B1 was clicked");
};

it does not work.

Any ideas?

https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads will be helpful for you — Muhammad Usman, Mar 13 '18 at 10:06
Local storage OR you could use an ajax solution, so the form doesn't have to refresh in the browser each time. Either should work fine. Personally I'm bias to AJAX as you could do a nice animation for each time the button is clicked, i.e. a simple `fadeIn()` and `fadeOut()` animation. — JO3-W3B-D3V, Mar 13 '18 at 10:15
Thanks to both of u.. I found the answer in session storage as mentioned in the stackoverflow post mentioned by usman — utkarsh2k2, Mar 13 '18 at 10:53

Camille · Answer 1 · 2018-03-13T15:20:44.350

Maybe a bit tricky for solve your problem but could work...or maybe gives you idea to solve it.

If you go to server after each step, it's not in javascript but in php you need to add validation.

As you like to go to server (php) between each step, you can have every form inputs at once and only display needed step.

You also needs a current-step input to know in php at witch step you are.

HTML

<form method="POST">
  <input type="hidden" id="currentStep" value="">      
  <div class="container-step1">
    <!-- Step 1 -->
    <input type="hidden" id="B1Clicked" value="N">
    Step 1 
    <button type="button" id="B1">Button 1</button>
    <button type="submit" class="step-submit" current-step="1">Next</button>
  </div>

  <div class="container-step2">
    <!-- Step 2 -->
    <input type="hidden" id="B2Clicked" value="N">
    Step 1 
    <button type="button" id="B2">Button 2</button>
    <button type="submit" class="step-submit" current-step="2"id="Next">Next</button>
  </div>

  <div class="container-step3">
    <!-- Step 3 -->
    <input type="hidden" id="B3Clicked" value="N">
    Step 1 
    <button type="button" id="B3">Button 3</button>
    <button type="submit" class="step-submit" current-step="3"id="Next">Next</button>
  </div>

</form>

JS

$( document ).ready(function() {
  // Hide all steps
  $("div[class^='container-step']").hide();
  // Show only step container give by server
  $('.container-step<?= $currentStep ?>').show();

  $('#B1').onclick = function() {
     $('#B1Clicked').value('Y');
  };
  $('#B2').onclick = function() {
     $('#B2Clicked').value('Y');
  };
  $('#B3').onclick = function() {
     $('#B2Clicked').value('Y');
  };
  // Set current step
  $('.step-submit').on('click', function(e) {
     var currentStepValue = $(e.target).attr('current-step');
     $('#currentStep').value(currentStepValue);
     return true;
  });
});

PHP

// Read current step from interface
$currentStep = filter_input(INPUT_POST, 'currentStep');
// Test for first show
if (null == $currentStep) $currentStep = 1;

// Fetch all step data
$b1Clicked = filter_input(INPUT_POST, 'B1Clicked');
$b2Clicked = filter_input(INPUT_POST, 'B2Clicked');
$b3Clicked = filter_input(INPUT_POST, 'B3Clicked');

// If all step has been clicked -> do validation
if ($b1Clicked == 'Y' && $b2Clicked == 'Y' && $b3Clicked == 'Y') {

  // Add your validation here

}

thank you for ur wonderful effort.. but this isnt exactly what i was looking for — utkarsh2k2, Mar 13 '18 at 10:53
No prob, localStorage is easy and good solution. I'm a bit too old fashion :-) — Camille, Mar 13 '18 at 15:20

score 1 · Answer 2 · answered Mar 13 '18 at 10:39

1

You can you localStorage to store button click information. In the following link you can get useful information.

Fiddle Demo Here

answered Mar 13 '18 at 10:39

Abhilash Ravindran C K

1,818
2
13
22

Step form validation

2 Answers2