Validate html form when button click

Question

I need to validate HTML form when click and display error message if the field is empty or else I try to do that using JavaScript

<script type="text/javascript">
        $(document).ready(function () {

            $('#idnext').click(function () {

             $("#fromtopupvalues").validate({
                messages: {

                    usernfidtxt:{required: "Please enter your nf id",},
                    first_name: {required:"Please enter a first name",},
                    last_name: {required:"Please enter a last name",},
                    email: {required:"Please enter a valid email address",},
                    phone: {required:"Please enter a valid phone number",},
                    address: {required:"Please enter a valid address",},
                    city: {required:"Please enter your City",},
                    country: {required:"Please enter your Country",},
                    amount: {required:"Please enter your 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 I 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'>[email protected]</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 Now   <span class="glyphicon glyphicon-chevron-right"></span>
                                            </button></td>
                                        </div>
                                    </div>
                                </div>

                            </div>
                          </div>
                        </div>
                      </form>
                </div>

What I need is when user click the next form I need to validate the Payment form using JavaScript or jQuery

your form has id fromtopupvalues and there is no usernfidtxt in your form. It's usernfcidtxt and no need to wrap your validate function inside click event. — bibliophilsagar
– bibliophilsagar, Commented Aug 29, 2016 at 5:41
basically i need to validate the HTML textbox when click the Next(id="idnext") button — Nuwan Indika
– Nuwan Indika, Commented Aug 29, 2016 at 5:43
put your .validate() code outside of button's click handler. And inside click handler just execute the form validation by $("#fromtopupvalues").valid();. — vijayP
– vijayP, Commented Aug 29, 2016 at 5:45

SreerajS · Accepted Answer · 2016-08-29 06:08:12Z

2

Hi just check the below fiddle. Updated your code and now it seems working. Just call $("#registerform").valid(); inside your button click. Also move your validation declarations to outside of the click function.

$(document).ready(function() {
  $("#registerform").validate({
    messages: {

      usernfidtxt: {
        required: "Please enter your nf id"
      },
      first_name: {
        required: "Please enter a first name"
      },
      last_name: {
        required: "Please enter a last name"
      },
      email: {
        required: "Please enter a valid email address"
      },
      phone: {
        required: "Please enter a valid phone number"
      },
      address: {
        required: "Please enter a valid address"
      },
      city: {
        required: "Please enter your City"
      },
      country: {
        required: "Please enter your Country"
      },
      amount: {
        required: "Please enter your 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();

  });
});

https://jsfiddle.net/sreerajsaseendran/ck4oa39h/1/

answered Aug 29, 2016 at 6:08

SreerajS

5564 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nuwan Indika Over a year ago

can i know that if any field is empty can i hide or disable the Next button ?

SreerajS Over a year ago

If you hide or disable the next button, how this validation will work?? You want to remove validations?

SreerajS Over a year ago

You can do that by using if($("#registerform").valid()) condition. But you need to check this in each elements change. I did not tried this. Just a guess.

Nuwan Indika Over a year ago

i did try that too

Collectives™ on Stack Overflow

Validate html form when button click

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related