HTML5验证不会触发

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.

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>

</div>

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>

</div>