Bootstrap验证器 - 在没有正确验证的情况下提交fom

时间:2014-11-26 16:30:51

标签: ajax forms validation twitter-bootstrap-3

美好的一天!

我有contact form正在使用bootstrap validator。 我可以得到字段的(in)验证按预期显示,但似乎提交按钮不是"尊重"提交前的(in)验证 - 无需验证字段以便提交表单。我正在使用ajax来提交表单而不会对整个页面进行编码。

ajax代码应该位于my contact test page!

的mashup.js文件中

(如果你还没有注意到它,我是一个n00b - 非常感谢你的帮助:)

更新:(这是当前代码)

html的               

        <meta charset="utf-8">

        <!-- Website Title & Description for Search Engine purposes -->
        <title>Contact Form</title>

        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Content-Type -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <!-- Bootstrap CSS -->
        <link href="includes/css/bootstrap.min.css" rel="stylesheet">
        <link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">

        <!-- Responsive Navigator -->
        <link rel="stylesheet" href="includes/nav/responsive-nav.css">
        <!--<link rel="stylesheet" href="includes/nav/nav_styles.css">-->


        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="includes/js/modernizr-2.6.2.min.js"></script>


        <!-- BootStrap Validator CSS -->
        <link rel="stylesheet" href="includes/css/bootstrapValidator.min.css"> 

        <!-- Custom CSS -->
        <link rel="stylesheet" href="includes/css/style.css">

</head>
<body>
    <div class="container">
        <div class="row">

                            <br>
                            <form id="html5Form" method="post" action='mail/mail.php'
                                class="form-horizontal"
                                data-bv-message="This value is not valid"
                                data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
                                data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
                                data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">    

                              <div class="form-group">
                                      <label>Name</label>
                                      <input class="form-control" placeholder="Name.." type="text" name="name" id="name"
                                             data-bv-message="The username is not valid"
                                             required data-bv-notempty-message="The username is required and cannot be empty"
                                             pattern="^[a-zA-Z0-9]+$" data-bv-regexp-message="The username can only consist of alphabetical, number"/>
                              </div>

                              <div class="form-group">
                                  <label>Email</label>
                                      <input class="form-control" placeholder="Email.." name="email" id="email" type="email" required data-bv-emailaddress-message="The input is not a valid email address"/>
                              </div>

                              <div class="form-group">
                                <label>Message</label>
                                <textarea class="form-control" name="message" id="message" rows="7" required 
                                data-bv-notempty-message="No empty message"></textarea>
                              </div>  

                                <input type="submit" id="submit" name="submit" value="Send"/>
                            </form>

                              <div class="loading">
                                    Sender melding...
                              </div>
                              <div class="success">
                              </div>


        </div>
    </div> <!-- End content -->



    <!-- Include jQuery -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <!-- Include Mashup -->
    <script src="includes/js/mashup.js"></script>

    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>


    <!-- BootStrap Validator JS -->
    <script src="includes/js/bootstrapValidator.min.js"></script> 

    <script>
        $(document).ready(function() {
            $('#html5Form').bootstrapValidator();
        });
    </script>       

</body>
</html>

的.js

$(document).ready(function() {
    $('form').on('submit', function(e){
        var thisForm = $(this);
        //Prevent the default form action

        //return false;
        e.preventDefault();

        //Hide the form
        $(this).fadeOut(function() {
          //Display the "loading" message
          $(".loading").fadeIn(function() {
            //Post the form to the send script
            $.ajax({
              type: 'POST',
              url: thisForm.attr("action"),
              data: thisForm.serialize(),
              //Wait for a successful response
              success: function(data) {
                //Hide the "loading" message
                $(".loading").fadeOut(function() {
                  //Display the "success" message
                  $(".success").text(data).fadeIn();
                });
              }
            });
          });
        });
      });
  }); 

1 个答案:

答案 0 :(得分:0)

通过查看提供的Ajax example,看起来您需要关注.on('success.form.bv'),而不是.on('submit')。所以你需要修改你的事件处理程序,如下所示:

$('form').on('success.form.bv', function(e) { ... });

希望这有帮助。