表单验证后未提交表单

Question

我有一个模态表单 window :

<div class="modal fade bs-example-modal-lg" id="vp" >
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Create Job</h4>
          </div>
          <div class="modal-body container-fluid">
            <form id="create_job" method="post" action="?create">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-4">
                        <input type="text" class="form-control" placeholder="Job number - Jxxxx" name="job_number">
                    </div>
                    <div class="col-md-4">
                        <input type="text" class="form-control" placeholder="Part number - xxxxxx" name="part_number">
                    </div>  
                    <div class="col-md-2"><p class="form-control-static text-right"><b>Cable length (m):</b></p></div>
                    <div class="col-md-2">
                        <input type="text" class="form-control" placeholder="Cable" value="06" name="cable">
                    </div>  
                </div>          
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="submit" name="submitButton" class="btn btn-primary">Submit</button></form>
          </div>
        </div>
      </div>
    </div>

这是验证js：

        $(document).ready(function() {
        $('#create_vpf_job').formValidation({
            framework: 'bootstrap',
            excluded: ':disabled',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                job_number: {
                    validators: {
                        notEmpty: {
                            message: ' '
                        }
                    }
                },
                part_number: {
                    validators: {
                        notEmpty: {
                            message: ' '
                        }
                    }
                },
                cable: {
                    validators: {
                        notEmpty: {
                            message: ' '
                        }
                    }
                }
            }
        });
    });

我在网上查找相同的问题，但没有找到解决方案。提交按钮不提交。我正在使用 formvalidation.io 进行验证，但他们的文档对我没有任何帮助。

也尝试添加但没有成功

$('#create_job').submit();

Answer 1

您的 HTML 格式错误，表单在容器 div 关闭后关闭，因此提交按钮不知道要提交什么。将其更改为：

<div id="vp" class="modal fade bs-example-modal-lg">
      <div role="document" class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="myModalLabel" class="modal-title">Create Job</h4>
          </div>
          <div class="modal-body container-fluid">
            <form action="?create" method="post" id="create_job">
              <div class="form-group">
                <div class="row">
                  <div class="col-md-4">
                    <input type="text" name="job_number" placeholder="Job number - Jxxxx" class="form-control" />
                  </div>
                  <div class="col-md-4">
                    <input type="text" name="part_number" placeholder="Part number - xxxxxx" class="form-control" />
                  </div>
                  <div class="col-md-2">
                    <p class="form-control-static text-right">
                      <b>Cable length (m):</b>
                    </p>
                  </div>
                  <div class="col-md-2">
                    <input type="text" name="cable" value="06" placeholder="Cable" class="form-control" />
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                <button class="btn btn-primary" name="submitButton" type="submit">Submit</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

它会起作用的。在 this plunkr 上，您可以检查它是否给出了错误的请求响应，这是个好消息，因为这意味着请求正在完成，因此，一旦做出更正，就会提交表单

表单验证后未提交表单

Form not submitting after form validation

forms

validation

modal-dialog

submit