我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
我在我的应用程序中有这个表单,我将通过AJAX提交它,但我想使用HTML5进行客户端验证。因此,我希望能够强制表单验证,也许通过jQuery。
我想在不提交表单的情况下触发验证。这可能吗?
当前回答
这是让HTML5对任何表单执行验证的一种非常直接的方式,同时仍然拥有对表单的现代JS控制。唯一需要注意的是提交按钮必须在<form>内。
html
<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>
js
// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );
function newAcctSubmit()
{
var myForm = jQuery( "#newUserForm" );
// html 5 is doing the form validation for us,
// so no need here (but backend will need to still for security)
if ( ! myForm[0].checkValidity() )
{
// bonk! failed to validate, so return true which lets the
// browser show native validation messages to the user
return true;
}
// post form with jQuery or whatever you want to do with a valid form!
var formVars = myForm.serialize();
etc...
}
其他回答
根据这个问题,html5的有效性首先应该使用jQuery进行验证,在大多数答案中,这是不会发生的,原因如下:
同时使用html5表单的默认函数进行验证
checkValidity();// returns true/false
我们需要理解jQuery返回对象数组,而选择像这样
$("#myForm")
因此,您需要指定第一个索引以使checkValidity()函数工作
$('#myForm')[0].checkValidity()
以下是完整的解决方案:
<button type="button" name="button" onclick="saveData()">Save</button>
function saveData()
{
if($('#myForm')[0].checkValidity()){
$.ajax({
type: "POST",
url: "save.php",
data: data,
success: function(resp){console.log("Response: "+resp);}
});
}
}
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
$('<input type="submit">').hide().appendTo($myForm).click().remove();
}
你说的是两种不同的东西“HTML5验证”和使用javascript/jquery的HTML表单验证。
HTML5“拥有”用于验证表单的内置选项。例如在字段上使用“required”属性,如果不使用javascript/jquery,表单提交可能会失败(基于浏览器实现)。
使用javascript /jquery,你可以做这样的事情
$('your_form_id').bind('submit', function() {
// validate your form here
return (valid) ? true : false;
});
您不需要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的值。
这使我能够显示带有表单验证的原生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。
参考
希望能帮助别人。