Check if all the required inputs are set before submit with javascript-CodePudding

I'm wondering if there's a way to force a check for the required inputs on a form before submitting it programmatically using pure Javascript:

<form method="post" action="myController.php" id="myForm">
   <input type="text" id="input1" required>
   <input type="text" id="input2" required>
   <input type="text" id="input3" required>
   <input type="submit" onClick="return checkForm(event)" value="Save">
</form>

My Javascript file:

function checkForm(e) {
   e.preventDefault();
   // Some other stuff
   /*Prevalidate required inputs here*/
   document.getElementById('myForm').submit();
}

I'm wondering if there's something like:

if(document.getElementById('myForm').valid()) {
   document.getElementById('myForm').submit()
}

Where the required inputs are checked just before submitting the form without the need to verify one by one directly by code.

CodePudding user response：

There is the form.onSubmit event

But if you are using HTML 5, you can use input.pattern with a regular expression; submission will be blocked if the input doesn't pass the check and the input element will (on many browsers) get a red border around it.

CodePudding user response：

If you need to do something custom on submit you can trigger validation via form.reportValidity() and get back a boolean indicating whether all inputs have satisfied their constraints.

You can also listen for invalid events that will get fired for each invalid input during validation if you want to do something to flag them in the UI:

function onInvalid (e) {
  e.target.classList.add('invalid');
}

const form = document.querySelector('form');

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('invalid', onInvalid);
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  
  const valid = form.reportValidity();
})

.invalid {
  border: 4px solid red;
}

<form>
  <input name="test1" required />
  <input name="test2" required />
  <input name="test3" required />
  <input type="submit" />
</form>

CodePudding user response：

Take adventage of Form attribute onsumbit to submit the form if the value returned from the function checkForm which returns boolean value if all fields are filled and not empty dynamically.

function checkForm(e) {
    let valid = true;
    inputs = document.querySelectorAll('[type="text"]')
    for(input of inputs){
      if(input.value.trim()==''){
        valid = false;
        break;
      }
    }
    return valid;
}

<form method="post" id="myForm" action='test.php' onsubmit="return checkForm(this)">
   <input type="text" id="input1" required>
   <input type="text" id="input2" required>
   <input type="text" id="input3" required>
   <input type="submit" value="Save">
</form>