Bootstrap Validator无法提交

时间:2015-06-17 20:27:51

标签: twitter-bootstrap validation

我设法让您在键入时使用Bootstrap Validator。它会突出显示绿色和红色的框以显示成功和错误,同时还显示图标。但是,一旦单击“提交”按钮,就不会发生验证。页面似乎重新加载但没有任何反应。最后,我希望这可以通过电子邮件将表单信息发送给我,但我想先让验证工作,然后我会尝试解决这个问题。谢谢!

HTML表单(决赛将比这复杂得多,但这是一个起点。)

<form id="adopt-form" class="form-horizontal" role="form" method="post">
          <div class="form-group">
              <label for="name" class="col-sm-3 control-label">Name</label>
              <div class="col-sm-7">
                  <input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">  
              </div>
          </div>
          <div class="form-group">
              <label for="email" class="col-sm-3 control-label">Email</label>
              <div class="col-sm-7">
                  <input type="email" class="form-control" id="email" name="email" placeholder="example@domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
              </div>
          </div>
          <div class="form-group">
              <label for="address" class="col-sm-3 control-label">Street Address</label>
              <div class="col-sm-7">
                  <input type="text" class="form-control" id="address" name="address" placeholder="Your Street Address" value="<?php echo htmlspecialchars($_POST['address']); ?>">
              </div>
          </div>
          <div class="form-group">
             <div class="col-sm-10 col-sm-offset-2">
                 <input id="submit" name="submit" type="submit" value="Send" class="btn btn-primary">
             </div>
          </div>
</form>

JS

 $(document).ready(function(){
        $('#name').focus();
        $('#adopt-form').bootstrapValidator({
            live:'enabled',
            submitButtons: 'button[id="submit"]',
            message:"This value is not valid.",
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
        },
            fields: {
                name: {
                    autoFocus: true,
                    //message: "Name is required.",
                    validators : {
                        stringLength:{
                            min:4,
                        },
                        notEmpty:{
                            //message : "Please provide a name."
                        }
                    }
                },
                email: {
                    //message: "Email address is required.",
                    validators : {
                        emailAddress: {
                            //message: "Please enter a valid email address."
                        },
                        notEmpty:{
                            //message : "Please provide an email address."
                        }
                    }
                }
            },
        })
    });//document ready

0 个答案:

没有答案