javascript - How to run HTML validation with onClick JQuery function? - Stack Overflow

admin管理员组

文章数量:1430548

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?

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?

• javascript
• html
• jquery
• validation
• constraint-validation-api

Share Improve this question Follow edited Jan 12, 2023 at 19:47 TylerH 21.1k7979 gold badges7979 silver badges114114 bronze badges asked Jul 30, 2017 at 23:20 espresso_coffeeespresso_coffee 6,1201212 gold badges9696 silver badges220220 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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

本文标签： javascriptHow to run HTML validation with onClick JQuery functionStack Overflow