0
我想驗證表單並使用Bootstrap 3彈出來通知用戶無效的表單數據。我有處理驗證下面的JavaScript代碼:獲取Bootstrap 3 popover與jQuery驗證
$(document).ready(function() {
$('#signup').validate({
rules: {
signup_email: {
required: true,
maxlength: 45
},
signup_password: {
required: true,
minlength: 8
},
'signup[confirm_password]': {
required: true,
equalTo: "#signup_password"
}
},
messages: {
signup_email: {
required: "Please enter your email address",
maxlength: "Your email address is too long!"
},
signup_password: {
required: "Please enter a password",
minlength: "Your password must be at least 8 characters long."
},
'signup[confirm_password]': {
required: "Please retype your password",
equalTo: "Passwords do not match!"
}
},
errorElement: 'span',
errorClass: 'error',
validClass: 'success',
highlight: function(element, errorClass) {
$(element).popover('show');
},
unhighlight: function(element, errorClass) {
$(element).popover('hide');
},
errorPlacement: function(err, element) {
err.hide();
}});
$('#signup_email').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
$('#signup_password').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
$('#signup_confirm_password').popover({
placement: 'below',
offset: 20,
trigger: 'manual'
});
});
和下面的HTML表單:
<input type="email" id="signup_email" name="signup[email]" required="required" class="form-control" placeholder="Email" rel="popover" />
<input type="password" id="signup_password" name="signup[password]" required="required" class="form-control" placeholder="Password" rel="popover" />
<input type="password" id="signup_confirm_password" name="signup[confirm_password]" required="required" class="form-control" placeholder="Retype Password" rel="popover" />
<button type="submit" id="signup_send" name="signup[send]" class="btn btn-default">Let's go.</button>
當我提交表單,確認工作正常,但顯示沒有popovers。有誰知道可能是什麼原因造成的?