ajax 调用后表单验证不起作用

Question

通过 ajax 调用加载表单后，表单验证无法正常工作。我该如何解决这个问题？

$(document).ready(function() {
  // $('#add_product').submit(function(e){
  $(document).on('submit', '#add_product', function(e) {
    e.preventDefault();
    $.post('script/test.php', {
        naam: $('#naam').val()
      })
      .done(function(response) {
        bootbox.alert(response);
        parent.fadeOut('slow');
      })
      .fail(function() {
        bootbox.alert('error');
      })
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="add_product" method="post">
  <div class="modal-body">
    <div class="header add_product">
      <div class="form-group">
        <label class="control-label">Productnaam*</label>
        <input maxlength="250" id="naam" type="text" required="required" class="form-control" name="naam" />
      </div>
    </div>
    <hr/>

    <div class="modal-footer ">
      <button class="btn btn-success completeBtn btn-lg" name="submit" type="submit" style="width: 100%;">
                        <span class="glyphicon glyphicon-ok-sign"></span> Toevoegen
                    </button>
    </div>
</form>

Answer 1

正如api.jquery 所说，

.submit() 方法是第一个变体中.on( "submit", handler ) 和第三个变体中.trigger( "submit" ) 的快捷方式。

所以这两个构造的行为应该是相同的。

此外，您将submit 事件从#add_product 委托给document，这会降低性能，因为它现在必须侦听文档中的所有提交事件。

也许由于事件委托，您可能在代码中的某处有一个e.stopPropagation，这会阻止您的事件自然冒泡到文档中，因此不会执行处理程序。

如果可能的话，稍微限制范围比听文档要好得多。

尝试以下方法：

$(document).ready(function(){
        $('#add_product').on('submit', function(e) {
        e.preventDefault();
        $.post('script/test.php',
            {naam: $('#naam').val()})
            .done(function(response){
                bootbox.alert(response);
                parent.fadeOut('slow');
            })
            .fail(function(){
                bootbox.alert('error');
            })
    });
});

Answer 2

尝试在您的处理程序中添加“return false”：

$(document).on('submit','#add_product',function(e){
        e.preventDefault();
        $.post('script/test.php',
            {naam: $('#naam').val()})
            .done(function(response){
                bootbox.alert(response);
                parent.fadeOut('slow');
            })
            .fail(function(){
                bootbox.alert('error');
            })
        return false;
    });

Answer 3

尝试以下方法：

$(document).ready(function() {
    $('#add_product').on('submit', function(e) {
        e.preventDefault();
        $.post('script/test.php', { naam: $('#naam').val() })
            .done(function(response) {
                bootbox.alert(response);
                parent.fadeOut('slow');
            })
            .fail(function() {
                bootbox.alert('error');
            })
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="add_product" method="post">
                <div class="modal-body">
                    <div class="header add_product">
                        <div class="form-group">
                            <label class="control-label">Productnaam*</label>
                            <input maxlength="250" id="naam" type="text" required="required"
                                   class="form-control" name="naam"/>
                        </div>
                    </div>
                        <hr/>
             
                <div class="modal-footer ">
                    <button class="btn btn-success completeBtn btn-lg" name="submit"
                            type="submit" style="width: 100%;">
                        <span class="glyphicon glyphicon-ok-sign"></span> Toevoegen
                    </button>
                </div>
                </form>