javascript - 不触发 HTML5 验证

Question

我直接上题
这是我的表格

<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>    

这是我的 Javascript，这里是新手。

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

});
</script>

所以问题是提交表单时没有触发html5验证
如果可以继续，我还想添加警报，但应该触发 html5 验证
谁能帮我？我真的很感激。提前谢谢。

Answer 1

提交表单时未触发 HTML5 验证，因为您在调用时在 JavaScript 中提交了表单:$('#formfield').submit();

要添加确认对话框，您可以使用像 confirm 这样简单的东西，尽管 confirm 并不总是最好的主意。您可以将类似这样的内容添加到您的事件监听器中:

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

---

片段(不完全有效，因为 stacksnippets.net 不允许提交表单，但请检查您的控制台)

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>