I ran into a situation where I have a HTML form and it has required on many of the fields. The issue is I have to use preventDefault which ignores 'required' inputs and submits the form even without the required fields. Because the work is not entirely up to me I must use preventDefault and work around it.

I am working with jQuery and I am trying to find a way to target the fields that have required and prevent the form from submitting on click.It is important that the required fields are filled out on the form before a user can submit the form as I do not want required information missing when it is being submitted. Help is appreciated!

HTML

<form id="myForm">

    <input type="text" name="sentence1" id="st1" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st2" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st3" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st4" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st5" placeholder="This field is not required">

    <button type="submit" id="submit-form">Submit</button>

</form>

I ran into a situation where I have a HTML form and it has required on many of the fields. The issue is I have to use preventDefault which ignores 'required' inputs and submits the form even without the required fields. Because the work is not entirely up to me I must use preventDefault and work around it.

I am working with jQuery and I am trying to find a way to target the fields that have required and prevent the form from submitting on click.It is important that the required fields are filled out on the form before a user can submit the form as I do not want required information missing when it is being submitted. Help is appreciated!

HTML

<form id="myForm">

    <input type="text" name="sentence1" id="st1" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st2" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st3" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st4" placeholder="Text here" required>

    <input type="text" name="sentence1" id="st5" placeholder="This field is not required">

    <button type="submit" id="submit-form">Submit</button>

</form>

• javascript
• jquery
• html
• forms
• preventdefault

• your question is a bit unclear. Is the native form validation not working for you? – karthick Commented Feb 21, 2018 at 2:36
• Thanks for pointing that out, I reworded the question giving more detail. The native form validation is not working because of preventDefault. Therefore I need to create something that prevents the form from being submitted if required inputs are not filled out. – user5854648 Commented Feb 21, 2018 at 2:45

5 Answers 5

In your event handler, where you are using preventDefault(), add the checkValidity() method on the form element:

document.getElementById('myForm').checkValidity();

This will "statically" check your form for all HTML5 constraint violations (including required),

Came across the same problem and here is the solution that works for me.

Form elements have a function called checkValidity and reportValidity. We can use these and override the click event for the submit button.

$('#submit-form').click((event) => {
    let isFormValid = $('#myForm').checkValidity();
    if(!isFormValid) {
        $('#myForm').reportValidity();
    } else {
        event.preventDefault();
        ... do something ...  
    }
});

Just a quick solution for your problem. I hope this is what you need. Check below:

$('#submit-form').click(function(){
     event.preventDefault();
     if(validateForm()){
      alert('sending');
     }

    });


    function validateForm() {
      var isValid = true;
      $('input[type=text]').each(function() {
        if ( $(this).val() === '' ) {
        alert('validation failed');
        isValid = false;
        } 
      });
      return isValid;
    }

Or visit JSFiddle: enter link description here

I used checkValidity() and reportValidity() in my case (i.e react.js). You'll need an onClick function that'll check the input tag element and report its validity if false.

if (document.getElementById('id-of-input-tag').checkValidity() === false) {
   document.getElementById('id-of-input-tag').reportValidity()
   
   // Or whatever you'd like to happen
}

You can use preventDefault() in forms submit method. Then 'required' will work.

document.querySelector('form').addEventListener('submit', submitHandler);

function submitHandler(e){
e.preventDefault();
//your code here
}