HTML5 validation does not trigger

Question

I will go directly to the problem
So here is my form

<form action="<?php echo base_url()?>" method="post" id="formfield">
    <center>
        <label>How much? <small>( Minimum of 100 )</small></label>
        <div class="ui input">
          <input type="number" name="amount" required>
        </div>  
        <br>
        <label>Payment type <small>(<a href="#" data-toggle="modal" data-target="#payment_type"> see all </a>)</small></label>
        <br>
        <div class="ui input">
          <input type="text" name="type" required>
        </div>  
        <br>
        <div class="">
        <input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit" >      
        </div>                                
    </center>   
</form>    

And here is my Javascript, newbie here.

<script>
  $(function()
{
  $('#btnsubmit').on('click',function()
  {
    $(this).val('Please wait ...')
      .attr('disabled','disabled');
    $('#formfield').submit();
  });

});
</script>

So the problem is that the form submit without triggering the html5 validation
I also wanted to add alert if Ok proceed but should trigger the html5 validation
Can anyone help me? I will really appreciate it. Advance thank you.

Answer 1

The form is submitting without triggering the HTML5 validation because you're submitting the form in your JavaScript when you call: $('#formfield').submit();

To add a confirmation dialog, you could use something as simple as confirm , though confirm is not always the best idea. You could add something like this to your event listener:

if (confirm('Are you sure?')) {
    // Yes
    $(this).val('Please wait ...').attr('disabled','disabled');
} else {
    // Prevent form from being submitted
    return false;
}

---

Snippet (doesn't exactly work, because stacksnippets.net doesn't allow forms to be submitted, but check your console)

 function go() { if (confirm('are you sure?')) // Form would be submitted, but stacksnippets prevents it. document.querySelector('form').submit(); else return false; } 

 <form action=""> <input type="text" required> <button onclick="go()"> Submit </button> </form> 

Answer 2

May be this will help you;

 $(document).ready(function() { $('#formfield').on('submit', function(e) { $("#btnsubmit").val('Please wait ...') .attr('disabled', 'disabled'); }); }); 

 <form action="<?php echo base_url()?>" method="post" id="formfield"> <center> <label>How much? <small>( Minimum of 100 )</small> </label> <div class="ui input"> <input type="number" name="amount" required> </div> <br> <label>Payment type <small>(<a href="#" data-toggle="modal" data-target="#payment_type"> see all </a>)</small> </label> <br> <div class="ui input"> <input type="text" name="type" required> </div> <br> <div class=""> <input type="submit" class="btn btn-primary" value="Order Now" id="btnsubmit"> </div> </center> </form>