How to run HTML validation with onClick JQuery function?

Question

I'm trying to implement HTML 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 the HTML 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 HTML is good fit for my project and how I can get validation to work with onClick function?

score 5 · Accepted Answer · edited Jan 12 '23 at 19:48

If you want HTML 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 HTML 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 {

            }
        }
   });
})

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

I guess this won't work for me. It's designed more for single form. Like I mentioned above I have 4 different from's in my app. Function that I created will handle any of these forms. Thanks for your help. — espresso_coffee, Jul 31 '17 at 00:34
Maybe... $('#myform, #yourForm, #theirForm).on('submit', function(e) { e.preventDefault(); I don't know know, haven't tried. — Donald Powell, Jul 31 '17 at 01:13
how you would pass form ID? I don't get that part since your function is on submit? — espresso_coffee, Jul 31 '17 at 01:15

How to run HTML validation with onClick JQuery function?

1 Answers1