我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
当前回答
if $("form")[0].checkValidity()
$.ajax(
url: "url"
type: "post"
data: {
}
dataType: "json"
success: (data) ->
)
else
#important
$("form")[0].reportValidity()
来自:html5表单验证
其他回答
这使我能够显示带有表单验证的原生HTML 5错误消息。
<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>
$('#RegForm').on('submit', function ()
{
if (this.checkValidity() == false)
{
// if form is not valid show native error messages
return false;
}
else
{
// if form is valid , show please wait message and disable the button
$("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");
$(this).find(':submit').attr('disabled', 'disabled');
}
});
注意:RegForm是表单id。
参考
希望能帮助别人。
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
我知道这个问题已经有了答案,但我还有另一个可能的解决方案。
如果使用jquery,你可以做到这一点。
首先在jquery上创建两个扩展,这样你就可以在需要时重用它们。
$.extend({
bypassDefaultSubmit: function (formName, newSubmitMethod) {
$('#'+formName).submit(function (event) {
newSubmitMethod();
event.preventDefault();
}
}
});
接下来,在你想使用它的地方做一些这样的事情。
<script type="text/javascript">
/*if you want to validate the form on a submit call,
and you never want the form to be submitted via
a normal submit operation, or maybe you want handle it.
*/
$(function () {
$.bypassDefaultSubmit('form1', submit);
});
function submit(){
//do something, or nothing if you just want the validation
}
</script>
在不使用提交按钮的情况下检查所有必须填写的字段,您可以使用下面的功能。
您必须为控件分配所需的属性。
$("#btnSave").click(function () {
$(":input[required]").each(function () {
var myForm = $('#form1');
if (!$myForm[0].checkValidity())
{
$(myForm).submit();
}
});
});
您不需要jQuery来实现这一点。在你的表单中添加:
onsubmit="return buttonSubmit(this)
或JavaScript:
myform.setAttribute("onsubmit", "return buttonSubmit(this)");
在buttonSubmit函数(或任何调用它的函数)中,可以使用AJAX提交表单。buttonSubmit只会在你的表单在HTML5中被验证时被调用。
如果这有助于任何人,这是我的buttonSubmit函数:
function buttonSubmit(e)
{
var ajax;
var formData = new FormData();
for (i = 0; i < e.elements.length; i++)
{
if (e.elements[i].type == "submit")
{
if (submitvalue == e.elements[i].value)
{
submit = e.elements[i];
submit.disabled = true;
}
}
else if (e.elements[i].type == "radio")
{
if (e.elements[i].checked)
formData.append(e.elements[i].name, e.elements[i].value);
}
else
formData.append(e.elements[i].name, e.elements[i].value);
}
formData.append("javascript", "javascript");
var action = e.action;
status = action.split('/').reverse()[0] + "-status";
ajax = new XMLHttpRequest();
ajax.addEventListener("load", manageLoad, false);
ajax.addEventListener("error", manageError, false);
ajax.open("POST", action);
ajax.send(formData);
return false;
}
我的一些表单包含多个提交按钮,因此这一行if (submitvalue == e.elements[i].value)。我使用单击事件设置了submitvalue的值。