Question 201069 in Html Question posted in
Some basic documentation can be found here.

Html – How to check field completeness in a mixed form

I have a form.

The form has inputs and number fields.

I want to check for every gesture that the fields are filled in so I can enable/disable the submit button.

I tried with keydown/up but that doesn’t help with the number fields.

I tried with onchange which generally works but I have weird effects like you have to click outside the input to trigger the event or if you fill in the fields and then delete one they are not rechecked so you can click the submit button without the form being properly filled in.

No I can’t use ‘required’ because I’m not actually submitting the form — it’s all through js

Tags:

2

Answers


  1. 0

    Use input: Only ones not triggering input are the buttons

    const form1 = document.getElementById("form1")
form1.addEventListener("input", (e) => {
  console.log(e.target.tagName, e.target.type ? e.target.type : "");
});
form1.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("form1 submitted");
});
    [type=image] {
  height: 30px;
}
    <form id="form1">
  <input type="number" />
  <input type="date" />
  <input type="checkbox" />
  <input type="radio" name="a" />
  <input type="radio" name="a" />
  <input type="text" />
  <input type="password" />
  <textarea></textarea>
  <input type="button" value="click" />
  <input type="submit" />
  <input type="image" src="https://www.freeiconspng.com/uploads/red-submit-button-png-2.png" />
  <select>
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select multiple>
    <option value="">Please select one or more</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</form>

    You CAN use required

    document.getElementById("form1").addEventListener("submit", (e) => {
  e.preventDefault(); 
  /* here the form is valid and will not submit */
});
    [type=image] {
  height: 30px;
}
    <form id="form1">
  <input type="number" required min=1 max=10/>
  <input type="date" required/>
  <input type="checkbox" required/>
  <input type="radio" name="a" required/>
  <input type="radio" name="a" required/>
  <input type="text" required/>
  <input type="password" required/>
  <textarea required></textarea>
  <select required>
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select multiple required>
    <option value="">Please select one or more</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <input type="button" value="click" />
  <input type="submit" />
  <input type="image" src="https://www.freeiconspng.com/uploads/red-submit-button-png-2.png" />

</form>
    Login or Signup to reply.
  2. 0

    I hope this is helpful

    Check each one if you want:

    // get all input, textarea, select box and ...
const all_input = document.querySelectorAll('input, select, textarea');
// set event
for(const item of all_input) {
    item.onchange = function(e) {checkvalidation(item)}
    item.onkeyup = function(e) {checkvalidation(item)}
}

// check validations function
function checkvalidation(obj) {
    console.log(obj,obj.value);
    // test
    var everything_good = true;
    if (!obj.value) {
        item.style.backgroundColor = 'red';
        alert('your error text');
    }
}

    If you want check all

    // get all input, textarea, select box and ...
const all_input = document.querySelectorAll('input, select, textarea');
// check value
for(const item of all_input) {
    if (!item.value) {
        item.style.backgroundColor = 'red';
        alert('your error text');
    }
}

    Also you can set onclick on submit button and call your validation function and after that submit form with your own code

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search