如何使用 onClick JQuery 函数运行 HTML5 验证？

Question

我正在尝试在我的项目中实现 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
});

到目前为止，我无法使用onClick 函数进行 HTML 5 验证。我尝试使用checkValidty()，但我的表单上的必填字段从未出现过消息。我想知道 HTML5 是否适合我的项目以及如何获得验证以使用 onClick 函数？如果有人对此问题有解决方案，请告诉我。提前致谢！

Answer 1

如果您希望 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 调用，请尝试在 on submit 函数中使用 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 属性。