CODEWITHSUNDEEP
jqueryhtml
Siddharth
Siddharth

Reputation: 1769

Check HTML 5 Validation with help of Jquery

I have a form, which has HTML 5 Validations, and I want to show a loader when and only when there are no error messages from the HTML 5 validation. So how can I do it? I have tried a lot, by onclick event of the submit button and also tried through the form submit event but nothing is working.

This is the Form

<form action="<?php echo base_url();?>index.php/contact/index" method="post" id="contact_form">
  <div class="form-group">
    <label style="color: #333;">Name</label>
    <input type="text" class="form-control" id="input_name" name="input_name" placeholder="Enter Your Name" required="required">
  </div>
  <div class="form-group">
    <label style="color: #333;">Email</label>
    <input type="email" class="form-control" id="input_email" name="input_email" placeholder="Enter your Email" required="required">
  </div>
  <div class="form-group">
    <label style="color: #333;">Subject</label>
    <select class="form-control" id="input_subject" name="input_subject">
        <option value="FAQ"> FAQ's</option>
        <option value="Feedback & Suggestion"> Feedbacks And Suggestions</option>
    </select>

  </div>
  <div class="form-group">
    <label style="color: #333;">Message</label>
    <textarea class="form-control" id="input_message" name="input_message" placeholder="Enter your Message" required="required"></textarea>
  </div>

  <center>
  <button type="submit" class="btn btn-primary btn-lg btn-block" id="contact_submit">Submit</button><img src="<?php echo base_url();?>assets/img/load.gif" height="50" width="50" style="display: none;" id="loader"/>
  </center><br />
</form>

This is my javascript code for the loader

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

    $(document).on('click', '#contact_submit', function(){
    $('#loader').show();
  });
</script>

Upvotes: 1

Views: 636

Answers (2)

Jamie Barker
Jamie Barker

Reputation: 8256

This is code I have used for something similar, basically check the form submission instead of the submit button click and that gives access to the form validation.

$('form').submit(function (e) {
    e.target.checkValidity();
    $('#loader').show();
});

Upvotes: 3

phts
phts

Reputation: 3925

This fires only when the form is valid and really submitted

$("#contact_form").on('submit', function(){
    $('#loader').show();
});

Upvotes: 0

Related Questions