对于我的大多数网站,我使用的是Bootstrap 3框架。在我的表单中,我有四个不同的表单组进行验证,前两个与插件配合良好,其中验证名称和电子邮件地址。现在,Bootstrap 3具有一个功能,您可以使用按钮作为复选框或无线电。我想使用单选按钮功能。在填写表格并从无线电领域中选择一个选项后,我应该得到成功反馈。如果我没有选择任何选项并点击提交,我会得到错误反馈和消息,但它没有为成功而努力。
我跟着bootstrapValidator网站上的一个例子,我看不出我的形式与例子有什么不同。我不确定是否应该有另一个插件或其他东西。
http://bv.doc.javake.cn/examples/#fields-with-same-name
这是我的代码和插件我正在使用:
<" http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<" https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
<" http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
<" http://code.jquery.com/jquery-1.10.2.min.js">
<" http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<" http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js">
<form id="rsvpform" method= "POST" class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2">Name: </label>
<div class="col-sm-6">
<input type="text" class="form-control" name="name" placeholder="Enter Full Name" required></input>
</div>
</div>
<div class="form-group">
<p>Your email address will only be visible to the couple</p>
<label class="control-label col-sm-2">Email: </label>
<div class="col-sm-6">
<input type="email" class="form-control" name="email" placeholder="Enter an e-mail address" required></input>
</div>
</div>
<p>Will you be attending?</p>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" autocomplete="off" name="attending" value="Yes" /> Yes
</label>
<label class="btn btn-default">
<input type="radio" autocomplete="off" name="attending" value="No" /> No
</label>
<label class="btn btn-default">
<input type="radio" autocomplete="off" name="attending" value="Not Sure" /> Not Sure
</label>
</div>
</div>
</div>
<p>Who are you related to?</p>
<div class="form-group">
<label class="col-xs-3 control-label"></label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" autocomplete="off" name="family" value="Bride" />Bride
</label>
<label class="btn btn-default">
<input type="radio" autocomplete="off" name="family" value="Groom" />Groom
</label>
<label class="btn btn-default">
<input type="radio" autocomplete="off" name="family" value="Friend" />Friend
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
$(document).ready(function() {
$('#rsvpform').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
// Since the Bootstrap Button hides the radio and checkbox
// We exclude the disabled elements only
fields: {
name: {
validators: {
notEmpty: {
message: 'Your full name is required and cannot be empty'
},
stringLength: {
min: 2,
message: 'Your name should be longer than two characters'
}
}
},
email: {
validators: {
notEmpty: {
message: 'An email address is required and cannot be empty'
},
emailAddress: {
message: 'This email address is not valid'
}
}
},
excluded: ':disabled',
attending: {
validators: {
notEmpty: {
message: 'Are you even attending?'
}
}
},
family: {
validators: {
notEmpty: {
message: 'Please state your relation to the couple'
}
}
}
}
});
});