How to validate HTML elements when submitting through JQuery?

Question

I have an HTML form as shown below with some form fields and a submit and a delete button:

There is also a floating component which appears whenever there are changes in the form as shown in the same diagram with text: You have unsaved changes. This is a common component which appears for all the forms in my website.

When I submit the form using the form's Submit button, it validates all the fields as per the validations.

(for example: <input type="number" min="0"> will check that the number should be positive)

But if I submit the form from the Save button on the floating element, it does not checks for any validation, and just posts the request.

I tried using the following code, but the reportValidity() function doesn't do anything.

if (!form.checkValidity()) {
    form.reportValidity();
}

form.checkValidity() and form.reportValidity() both are returning false when I do a console.log.

What am I missing here, and how can I fix this?

P.S. I tried this on chrome v98.

Edit: Adding HTML code:

<form method="post" action="/products/manage/{{.Product.ID}}/submit/">
    <div class="form-group col-md-5">
        <label>Product Quantity</label>
        <input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
    </div>
    <button type="submit" class="btn btn-success" value="Submit">Submit</button>
    <button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>

Save button calls this function:

function submitForm(form, url) {
    const form = $(form)[0]
    if (!form.checkValidity()) {       //<- Added the code here
        form.reportValidity();
    }
    var serialized = serializeForm(form);
    // Do some more things then use HTTP to request the API
}

According to [this answer](https://stackoverflow.com/a/56736818/2181514) your code is correct, *depending* on the value of `form`, which you've not shown, and whether you cancel the submit, which your code, as provided, does not. I suggest you provided a *minimal* snippet that demonstrates the issue. See [mcve]. — freedomn-m, Mar 02 '22 at 10:43
It's not the form code that's relevant, it's the Save button as that's where it's not working for you. — freedomn-m, Mar 02 '22 at 11:05
In that function, I'm just serialising the form data and submitting an HTTP request on the given url. — Keshav Bhatiya, Mar 02 '22 at 11:11
Yes, and "in that function" is where you've stated your problem is; *But if I submit the form from the Save button on the floating element, it does not checks for any validation, and just posts the request.* If it's "just serializing and submitting" and you think there's no problem there, then what exactly are you asking in this question? Where exactly is the `if (!form.checkValidity()) {` code? This is why we ask for a *complete* snippet. — freedomn-m, Mar 02 '22 at 11:19
I have added the beginning part of the function where I added the reportValidity() function, hope that helps. — Keshav Bhatiya, Mar 02 '22 at 13:37
No idea how you call `submitForm()` - but it doesn't look like you're cancelling the event after checkValidity fails - either within submitForm() itself (the code carries on to the submit part) or to the calling element/code (if it's a button type=submit it will continue). Probably just need `return false;` after `form.reportValidity()` — freedomn-m, Mar 02 '22 at 13:39

toffler · Answer 1 · 2022-03-02T14:19:05.857

You can easily use the jQuery event handlers do the work for you. A simplified example below:

Give your form some identifier (example: id="form1")
Catch the click event on button click

Trigger the submit event to submit that form

$('.unsavedChangesBtn').on('click',function(){
   $('#form1').submit();
});

In below example you can submit the form either by clicking the submit button or the save button.

$('document').ready(function(){

  $('#form1').on('submit',function(){
    alert("SUBMITTED");
  });

  $('.unsavedChangesBtn').on('click',function(){
     $('#form1').submit();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" id="form1" action="javascript:void(0);">
    <div class="form-group col-md-5">
        <label>Product Quantity</label>
        <input type="number" min="0" name="ProductQuantity" value="{{if .Product}}{{.Product.Qunatity}}{{else}}10{{end}}">
    </div>
    <button type="submit" class="btn btn-success" value="Submit">Submit</button>
    <button type="submit" class="btn btn-danger" value="Delete" formaction="/products/manage/{{.Product.ID}}/delete/">Delete</button>
</form>

<button class="unsavedChangesBtn"> SAVE </button>

How to validate HTML elements when submitting through JQuery?

1 Answers1