我一直试图解决这个问题,我知道只要按钮属于提交类型,就可以在表单中触发验证。但是我在视图上有一些其他选项卡,当我使用提交时,它会导致后退并返回到第一个选项卡。我不希望发生这种情况所以我将我的验证放在一个函数中,并将按钮类型更改为一个按钮并删除了表单标记,并尝试在按钮单击事件上调用验证函数并且不触发。这可以不使用表单标签吗?
我的代码就是这个......
$(document).ready(function () {
$("#btnUpdateModerator").click(function () {
ValidateIt();
});
ValidateIt();
});
function ValidateIt() {
var validator = $("#Users").bootstrapValidator({
feedbackIcons: {
valid: "glyphicon glyphicon-ok",
invalid: "glyphicon glyphicon-remove",
validating: "glyphicon glyphicon-refresh"
},
fields: {
DealerUsername: {
message: "Username is required",
validators: {
notEmpty: {
message: "Please Provide Username"
}
}
},
email: {
message: "Email address is required",
validators: {
notEmpty: {
message: "Please provide Email address"
},
emailAddress: {
message: "Email address was invalid"
}
}
},
password: {
validators: {
notEmpty: {
message: "Password is required"
},
stringLength: {
min: 6,
message: "Password must be at least 6 characters long"
},
different: {
field: "email",
message: "Email and Password cannot match"
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: "Confirm Password is required"
},
identical: {
field: "password",
message: "Password and Confirmation Password must match"
}
}
},
department: {
validators: {
notEmpty: {
message: "Department is Required"
}
}
}
}
});
}
答案 0 :(得分:13)
我认为您需要保留表单元素,但将按钮类型设置为“按钮”而不是“提交”。然后,您可以使用bootstrap验证器的“验证”方法手动验证表单。
假设您的表单元素包含“{1}}”用户“,您应该可以将代码更改为:
id
注意:编写的$(document).ready(function () {
$("#btnUpdateModerator").click(function () {
$('#Users').bootstrapValidator('validate');
});
ValidateIt();
});
函数不验证表单,它会在表单上设置验证器。
注意:我认为API文档位于此处:http://bv.doc.javake.cn/api/
在发表关于进行ajax通话的评论后更新:
如果您想在单击按钮时进行ajax调用,但仅当表单有效时,我相信您会执行以下操作:
ValidateIt()
另一种写这个的方法是:
$("#btnUpdateModerator").click(function () {
$('#Users').bootstrapValidator('validate');
if ($('#Users').bootstrapValidator('isValid')) {
// Make the ajax call here.
}
});
答案 1 :(得分:1)
我相信bootstrap验证器将自己绑定到表单的submit()方法,因此将其移动到函数中实际上对您没有帮助。您可以截取表单的提交方法,但不允许它提交直到您想要它。
$("#myForm").submit(function(e){
e.preventDefault(); // <-- prevents the form from submitting
// do stuff
this.submit() // <-- send it through
});