Question

我使用javascript和php创建了一个步骤表单。表格有三个步骤。 Step1有两个按钮B1和Next，step2还有两个按钮B2和Next，最后step3有两个按钮 - B3和Submit 。现在我想使用javascript（JQuery）为表单添加验证，以确保在单击B1之前单击按钮B2，B3和Submit。

重要提示：每次按Next时页面都会重新加载，因此在您检查在步骤1中是否使用以下代码点击了按钮B1后进入第3步

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

它不起作用。

有什么想法吗？

Answer 1

解决问题可能有点棘手，但可能有用......或者可能会让你有意解决它。

如果你在每一步之后去服务器，它不在javascript中，但在php中你需要添加验证。

如果你想在每一步之间转到服务器（php），你可以同时拥有每个表单输入，只显示所需的步骤。

你还需要一个当前步骤输入，以便在php中了解你的步骤。

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

}

Answer 2

您可以localStorage存储按钮点击信息。在以下链接中，您可以获得有用的信息。

Fiddle Demo Here

步骤表格验证

2 个答案: