表单验证后表单未提交

xlucian

我在模式窗口中有一个表单:

<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();
路易斯·塞埃拉(Luis Sieira)

您的HTML格式不正确,并且在容器div关闭后该表单正在关闭,因此Submit按钮不知道要提交的内容。更改为:

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

它将起作用。此插件上,您可以检查它是否给出了错误的请求响应,这是个好消息,因为这意味着请求已完成,因此,更正后就提交了表单。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章