如何 运行 HTML5 使用 onClick JQuery 函数进行验证?
How to run HTML5 Validation with onClick JQuery function?
我正在尝试在我的项目中实施 HTML5 验证。似乎非常有用且易于使用。但是,此验证仅在输入类型设置为 submit
时有效。那部分给我带来了问题。我有多个表单,并且在所有提交按钮上使用相同的 name
属性。所以我的函数看起来像这样:
HTML:
<form name="myForm" id="myForm" method="POST" action="#">
<fieldset>
<legend>User Info</legend>
<div class="formItem">
<label for="last_name">Last Name:</label>
<input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
</div>
<div class="formItem">
<label for="first_name">First Name:</label>
<input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
</div>
//Same button I have on the other forms. Only ID is different.
<div class="formItem">
<p align="center"><input type="button" name="frmSubmit" id="frmstSubmit" value="Submit"></p>
</div>
</fieldset>
</form>
JQuery:
$('input[name="frmSubmit"]').on('click', function(){
var frmID = $(this).closest('form').prop('id'); //take form ID
var processVal = $(this).attr('data-process'); //which process will be executed Add or Edit
//Here I would like to check form validation then process AJAX call
});
到目前为止,我无法获得 HTML 5 验证以使用 onClick
函数。我尝试使用 checkValidty()
但消息从未出现在我表单上的必填字段中。我想知道 HTML5 是否适合我的项目以及如何获得验证以使用 onClick 函数?如果有人对此问题有解决方案,请告诉我。提前致谢!
如果您想要HTML5验证工作更改按钮类型以提交。
<input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit">
如果您想进行一些自定义验证,请添加一个 onsubmit 属性。
<form method="POST" action="form-handler" onsubmit="return checkForm(this);">
<p>Input: <input type="text" size="32" name="inputfield">
<input type="submit"></p>
</form>
<script type="text/javascript">
function checkForm(form)
{
if(!condition1) {
alert("Error: error message");
form.fieldname.focus();
return false;
}
if(!condition2) {
alert("Error: error message");
form.fieldname.focus();
return false;
}
...
return true;
}
</script>
参见:http://www.the-art-of-web.com/javascript/validate/
如果您想使用带有 HTML5 验证的 AJAX 调用,请尝试在提交函数中使用 e.preventDefault()。
$('#myForm').on('submit',function(e) {
e.preventDefault();
$.ajax({
url: url,
type: 'post',
data: data,
success: function (data) {
if (data.success) {
} else {
}
}
});
})
或
$(document).on('submit','#myForm',function(e) {
e.preventDefault();
$.ajax({
url: url,
type: 'post',
data: data,
success: function (data) {
if (data.success) {
} else {
}
}
});
})
更新 - 添加以回答评论中的问题:
参见 JSFiddle 对多个表单使用一个更改函数并获取 id 属性。
我正在尝试在我的项目中实施 HTML5 验证。似乎非常有用且易于使用。但是,此验证仅在输入类型设置为 submit
时有效。那部分给我带来了问题。我有多个表单,并且在所有提交按钮上使用相同的 name
属性。所以我的函数看起来像这样:
HTML:
<form name="myForm" id="myForm" method="POST" action="#">
<fieldset>
<legend>User Info</legend>
<div class="formItem">
<label for="last_name">Last Name:</label>
<input type="text" name="frmst_lname" id="frmst_lname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
</div>
<div class="formItem">
<label for="first_name">First Name:</label>
<input type="text" name="frmst_fname" id="frmst_fname" value="" size="20" maxlength="30" title="Maximum length 30 characters." required/>
</div>
//Same button I have on the other forms. Only ID is different.
<div class="formItem">
<p align="center"><input type="button" name="frmSubmit" id="frmstSubmit" value="Submit"></p>
</div>
</fieldset>
</form>
JQuery:
$('input[name="frmSubmit"]').on('click', function(){
var frmID = $(this).closest('form').prop('id'); //take form ID
var processVal = $(this).attr('data-process'); //which process will be executed Add or Edit
//Here I would like to check form validation then process AJAX call
});
到目前为止,我无法获得 HTML 5 验证以使用 onClick
函数。我尝试使用 checkValidty()
但消息从未出现在我表单上的必填字段中。我想知道 HTML5 是否适合我的项目以及如何获得验证以使用 onClick 函数?如果有人对此问题有解决方案,请告诉我。提前致谢!
如果您想要HTML5验证工作更改按钮类型以提交。
<input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit">
如果您想进行一些自定义验证,请添加一个 onsubmit 属性。
<form method="POST" action="form-handler" onsubmit="return checkForm(this);">
<p>Input: <input type="text" size="32" name="inputfield">
<input type="submit"></p>
</form>
<script type="text/javascript">
function checkForm(form)
{
if(!condition1) {
alert("Error: error message");
form.fieldname.focus();
return false;
}
if(!condition2) {
alert("Error: error message");
form.fieldname.focus();
return false;
}
...
return true;
}
</script>
参见:http://www.the-art-of-web.com/javascript/validate/
如果您想使用带有 HTML5 验证的 AJAX 调用,请尝试在提交函数中使用 e.preventDefault()。
$('#myForm').on('submit',function(e) {
e.preventDefault();
$.ajax({
url: url,
type: 'post',
data: data,
success: function (data) {
if (data.success) {
} else {
}
}
});
})
或
$(document).on('submit','#myForm',function(e) {
e.preventDefault();
$.ajax({
url: url,
type: 'post',
data: data,
success: function (data) {
if (data.success) {
} else {
}
}
});
})
更新 - 添加以回答评论中的问题:
参见 JSFiddle 对多个表单使用一个更改函数并获取 id 属性。