Twitter bootstrap 引导验证程序在提交时不工作
我已经设法让引导验证程序在您键入时工作。它以绿色和红色突出显示成功和错误框,同时还显示图标。但是,一旦单击“提交”按钮,就不会进行验证。页面似乎要重新加载,但什么也没发生。最后,我想通过电子邮件将表单信息发送给我,但我想先进行验证,然后再尝试解决这个问题。谢谢 HTML表单(最终版本将比这复杂得多,但这是一个起点。)Twitter bootstrap 引导验证程序在提交时不工作,twitter-bootstrap,validation,Twitter Bootstrap,Validation,我已经设法让引导验证程序在您键入时工作。它以绿色和红色突出显示成功和错误框,同时还显示图标。但是,一旦单击“提交”按钮,就不会进行验证。页面似乎要重新加载,但什么也没发生。最后,我想通过电子邮件将表单信息发送给我,但我想先进行验证,然后再尝试解决这个问题。谢谢 HTML表单(最终版本将比这复杂得多,但这是一个起点。) <form id="adopt-form" class="form-horizontal" role="form" method="post"> &
<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>
$(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