Question

我在模态窗口中有一个表单：

<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上，您可以检查它是否提供了错误的请求响应，这是个好消息，因为这意味着请求正在完成，因此，一旦进行了更正，表单就会被提交

表格验证后不提交表格

1 个答案: