Question

我有一个直接的表格，撒上了一些jQuery，但我有一个小问题。当我按下“下一步”按钮时，它会进入下一步而不会弹出带有＆＃34的小字段;您必须完成此必填字段＆＃34;。我如何强制下一个按钮执行此操作，因为提交按钮默认执行此操作？

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
    #regiration_form fieldset:not(:first-of-type) {
        display: none;
    }
  </style>
  <title>Form</title>
</head>
<body>
  <div class="container">
    <h1></h1>
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <form id="regiration_form" action="action.php"  method="post">
    <fieldset>
        <h2>Step 1: Create your account</h2>
        <div class="form-group">
        <label for="email">Email addresss</label>
        <input type="email" class="form-control" id="email" name="data[email]" placeholder="Email" required>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="password" placeholder="Password" required>
      </div>
        <input type="button" name="data[password]" class="next btn btn-info" value="Next" />
    </fieldset>
    <fieldset>
        <h2> Step 2: Add Personnel Details</h2>
        <div class="form-group">
        <label for="NameA">First Name</label>
        <input type="text" class="form-control" name="data[NameA]" id="NameA" placeholder="First Name" required>
      </div>
      <div class="form-group">
        <label for="NameB">Last Name</label>
        <input type="text" class="form-control" name="data[NameB]" id="NameB" placeholder="Last Name" required>
      </div>
        <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
        <input type="button" name="next" class="next btn btn-info" value="Next" />
    </fieldset>
    <fieldset>
        <h2>Step 3: Contact Information</h2>
        <div class="form-group">
        <label for="mob">Mobile Number</label>
        <input type="text" class="form-control" id="mob" name="data[mob]" placeholder="Mobile Number" required>
      </div>
      <div class="form-group">
        <label for="address">Address</label>
        <textarea  class="form-control" name="data[address]" placeholder="Communication Address" required></textarea>
      </div>
        <input type="button" name="previous" class="previous btn btn-default" value="Previous" />
        <input type="submit" name="submit" class="submit btn btn-success" value="Submit" id="submit_data" />
    </fieldset>
    </form>
  </div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
    var current = 1,current_step,next_step,steps;
    steps = $("fieldset").length;
    $(".next").click(function(){
        current_step = $(this).parent();
        next_step = $(this).parent().next();
        next_step.show();
        current_step.hide();
        setProgressBar(++current);
    });
    $(".previous").click(function(){
        current_step = $(this).parent();
        next_step = $(this).parent().prev();
        next_step.show();
        current_step.hide();
        setProgressBar(--current);
    });
    setProgressBar(current);
    // Change progress bar action
    function setProgressBar(curStep){
        var percent = parseFloat(100 / steps) * curStep;
        percent = percent.toFixed();
        $(".progress-bar")
            .css("width",percent+"%")
            .html(percent+"%");     
    }
});
</script>

Answer 1

必需的属性不适用于<input type="button" />它仅适用于<input type="submit" />。因此，您应该尝试另一种方式验证，例如当用户点击进行一些验证时。

$('form .btn').click(function(){
    //check input has required value 
});

Jquery表单步骤验证

1 个答案: