我设法让您在键入时使用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