0

I have a straight forward form sprinkled with a bit of jQuery, but I have a small issue. When I hit Next button it goes to the next step without popping up the small field with "you have to complete this required field". How can I force the next button to do this action as the submit button does it by default? If someone could show me an elegant way to adapt this to my curent code I would apreeciate it a lot :)

<!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>
1
Contributor
1
Reply
17
Views
1 Week
Discussion Span
Last Post by seularts
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.