javascript - Validate html form when button click -
i need validate html form when click , display error message if field empty or else try using javascript
<script type="text/javascript"> $(document).ready(function () { $('#idnext').click(function () { $("#fromtopupvalues").validate({ messages: { usernfidtxt:{required: "please enter nf id",}, first_name: {required:"please enter first name",}, last_name: {required:"please enter last name",}, email: {required:"please enter valid email address",}, phone: {required:"please enter valid phone number",}, address: {required:"please enter valid address",}, city: {required:"please enter city",}, country: {required:"please enter country",}, amount: {required:"please enter amount",}, }, rules: { usernfidtxt: "required", first_name: "required", last_name: "required", email: {// compound rule required: true, email: true, }, phone:{ required: true, pattern: "^[0-9-+s()]*$", }, address: "required", city: "required", country: "required", amount: "required", }, }); }) }); </script> in html form have following code
<div class="container"> <div class="stepwizard col-md-offset-3"> <div class="stepwizard-row setup-panel"> <div class="stepwizard-step"> <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> <p>payment form</p> </div> <div class="stepwizard-step"> <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> <p>summary</p> </div> </div> </div> <form role="form" id="fromtopupvalues" action="" method="post"> <div class="row setup-content" id="step-1"> <div class="col-xs-6 col-md-offset-3"> <div class="col-md-12"> <h4> payment form</h4> <div class="form-group"> <label class="control-label col-sm-4" for="useridtxt">topup user nfc id <span style="color: red" >*</span> :</label> <input type="number" class="form-control" id="usernfidtxt" placeholder="topup user nfc id" name="usernfcidtxt" min="0" required > </div> <div class="form-group"> <label class="control-label col-sm-4" for="first_name">first name <span style="color: red" >*</span> :</label> <input class="form-control" id="first_name" placeholder="first name" name="first_name" required> </div> <div class="form-group"> <label class="control-label col-sm-4" for="last_name">last name <span style="color: red" >*</span> :</label> <input class="form-control" id="last_name" placeholder="last name" name="last_name" required> </div> <div class="form-group"> <label class="control-label col-sm-4" for="email">email <span style="color: red" >*</span> :</label> <input type="email" class="form-control" id="email" placeholder="email" name="email" required> </div> <div class="form-group"> <label class="control-label col-sm-4" for="phone">phone number <span style="color: red" >*</span> :</label> <input type="tel" class="form-control" id="phone" placeholder="phone number" pattern="^[0-9-+s()]*$" name="phone" required> </div> <div class="form-group"> <label class="control-label col-sm-4" for="address">address <span style="color: red" >*</span> :</label> <textarea class="form-control" id="address" placeholder="address" name="address" required></textarea> </div> <div class="form-group"> <label class="control-label col-sm-4" for="city">city <span style="color: red" >*</span> :</label> <input class="form-control" id="city" placeholder="city" name="city" required> </div> <div class="form-group"> <label class="control-label col-sm-4" for="country">country <span style="color: red" >*</span> :</label> <input class="form-control" id="country" placeholder="country" name="country" value="sri lanka" required> </div> <div class="form-group"> <label class="control-label col-sm-4" for="idamounttxt">amount (rs.)<span style="color: red" >*</span> :</label> <input type="number" class="form-control" id="amount" placeholder="amount" name="amount" min="0"> </div> <button class="btn btn-primary nextbtn btn-lg pull-right" id="idnext" type="button" onclick="showinput();" >next</button> </div> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-6 col-md-offset-3"> <div class="col-md-12"> <h4> summary</h4> <div class="row"> <div class="well col-lg-12 "> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <address> <strong><span id='rc_addressheader'>elf cafe</span></strong> <br><span id='rc_addressline1'>2135 sunset blvd,los angeles, ca 90026</span><br> <span id='rc_addresscuntry'>sri lanka</span><br> <abbr title="phone">p:</abbr><span id='rc_addressphone'>(213) 484-6829</span><br> <abbr title="email">e:</abbr><span id='rc_addressemail'>test@gmail.com</span> </address> </div> <div class="col-xs-6 col-sm-6 col-md-6 text-right"> <p> <em>date:<span id='rc_date'>1st november, 2013</span></em> </p> </div> </div> <div class="row"> <div class="text-center"> <h1>summary</h1> </div> </span> <table class="table table-hover"> <thead> <tr> <th><h4>payment </h4></th> <th class="text-center"><h4>price (rs.)</h4></th> </tr> </thead> <tbody> <tr> <td class="col-md-9"><em><strong>topup value</strong></em></h4></td> <td class="col-md-1 text-center"><span id='rc_price'><strong>26</strong></span></td> </tr> <tr> <td class="col-md-9"><em><strong>subpayment</strong></em></h4></td> <td class="col-md-1 text-center"><span id='rc_subpayment'>50</span></td> </tr> <!-- <tr> <td class="text-right"> <p> <strong>subtotal: </strong> </p> <p> <strong>tax: </strong> </p></td> <td class="text-center"> <p> <strong><span id='rc_subtotal'>26</span></strong> </p> <p> <strong>50</strong> </p></td> </tr>--> <tr> <td class="text-right"><h4><strong>total: </strong></h4></td> <td class="text-center text-danger"><h4><strong>rs.<span id='rc_total'>31.53</span>/=</strong></h4></td> </tr> </tbody> </table> <button type="submit" class="btn btn-success btn-lg btn-block"> pay <span class="glyphicon glyphicon-chevron-right"></span> </button></td> </div> </div> </div> </div> </div> </div> </form> </div> what need when user click next form need validate payment form using javascript or jquery
hi check below fiddle. updated code , seems working. call $("#registerform").valid(); inside button click. move validation declarations outside of click function.
$(document).ready(function() { $("#registerform").validate({ messages: { usernfidtxt: { required: "please enter nf id" }, first_name: { required: "please enter first name" }, last_name: { required: "please enter last name" }, email: { required: "please enter valid email address" }, phone: { required: "please enter valid phone number" }, address: { required: "please enter valid address" }, city: { required: "please enter city" }, country: { required: "please enter country" }, amount: { required: "please enter amount" } }, rules: { usernfidtxt: "required", first_name: "required", last_name: "required", email: { // compound rule required: true, email: true, }, phone: { required: true, pattern: "^[0-9-+s()]*$", }, address: "required", city: "required", country: "required", amount: "required", }, }); $('#idnext').click(function() { $("#registerform").valid(); }); }); 
Comments
Post a Comment