CODEWITHSUNDEEP
javascriptjqueryhtmlformspreventdefault
user5854648
user5854648

Reputation: 1121

Check Required Fields With preventDefault

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>

Upvotes: 3

Views: 7736

Answers (5)

Olujimi David
Olujimi David

Reputation: 26

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
}

Upvotes: 0

jezztify
jezztify

Reputation: 85

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

Upvotes: 5

mark vincha
mark vincha

Reputation: 11

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
}

Upvotes: -1

Kamil
Kamil

Reputation: 286

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

Upvotes: 0

Randy Casburn
Randy Casburn

Reputation: 14165

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

Upvotes: 5

Related Questions