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

Question

I'm trying to implement HTML5 Validation in my project. Seems very helpful and easy for use. However this validation will work only if input type is set to submit . That part is causing problem for me. I have multiple forms and I use same name attribute on all Submit buttons. So my function looks like this:

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
});

So far I couldn't get HTML 5 validation to work with onClick function. I tried to use checkValidty() but message never showed up for required fields on my form. I'm wondering if HTML5 is good fit for my project and how I can get validation to work with onClick function? If anyone have solution for this problem please let me know. Thanks in advance!

Answer 1

If you want HTML5 Validation to work change button type to submit.

<input type="submit" name="frmSubmit" id="frmstSubmit" value="Submit">

If you want to do some custom validation add a onsubmit attribute.

<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>

see: http://www.the-art-of-web.com/javascript/validate/

If you want to use an AJAX call with HTML5 validation try using e.preventDefault() in a on submit function.

$('#myForm').on('submit',function(e) {
    e.preventDefault();

    $.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function (data) {
            if (data.success) {

            } else {

            }
        }
   });
})

or

$(document).on('submit','#myForm',function(e) {
  e.preventDefault();

  $.ajax({
        url: url,
        type: 'post',
        data: data,
        success: function (data) {
            if (data.success) {

            } else {

            }
        }
   });
})

Update - added to answer question in comment:

See JSFiddle to use one on change function for multiple forms and get id attribute.