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

Snippet（不完全正常，因为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>

Answer 2

可能会对你有帮助;

＆＃13;

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

＆＃13;

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

＆＃13;

HTML5验证不会触发

2 个答案: