How to validate all form inputs at once using JavaScript

Other Questions JavaScript
1

I need help with validating multiple form fields in JavaScript. Right now I have a function that only checks one specific input field, but I want to check all input fields in my form automatically. Is there a way to loop through all form inputs instead of checking them one by one?

Here’s what I’m working with:

function validateFormData(formId){
  var myForm = document.getElementById(formId);
  if (myForm.lastName.value == '') {
    alert("Please enter your last name");
    myForm.lastName.focus();
    return false;
  }
  else if (myForm.lastName.value.length == 0) {
    alert('Some required fields are empty');
    myForm.lastName.focus();
    return false;
  }
  return true;
}

This function works fine for the lastName field, but I have many other input fields that need the same validation. I’m looking for a JavaScript method or technique that can select and validate all input elements in the form without having to write separate code for each field. What would be the best approach to achieve this?

2

I’ve had good luck using the elements property on the form object. It automatically grabs all form controls without needing to query for them. Here’s my usual approach:

function validateFormData(formId) {
  var form = document.getElementById(formId);
  var elements = form.elements;
  
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.type !== 'submit' && element.type !== 'button' && element.value === '') {
      alert('Please complete all fields: ' + (element.name || element.id));
      element.focus();
      return false;
    }
  }
  return true;
}

form.elements naturally includes all form controls, and you can easily filter out buttons and submit inputs. I throw the field name in the alert so users know exactly what’s missing. This saves me time since I don’t need HTML attributes or complex selectors.

3

you can also grab all inputs with getElementsByTagName and check their values. just do var inputs = form.getElementsByTagName('input'); then loop through with a for loop. works great for basic validation when you don’t want to add required attributes everywhere.

4

Just use querySelectorAll to grab all your form inputs and loop through them. I’ve been doing this for years - works great across browsers.

function validateFormData(formId) {
  var form = document.getElementById(formId);
  var inputs = form.querySelectorAll('input[required], select[required], textarea[required]');
  
  for (var i = 0; i < inputs.length; i++) {
    if (inputs[i].value.trim() === '') {
      alert('Please fill in all required fields');
      inputs[i].focus();
      return false;
    }
  }
  return true;
}

This only targets elements with the required attribute, so add that to your HTML inputs. The trim() catches when users just enter spaces. You can extend this for specific validation rules by adding conditions inside the loop based on input types or custom data attributes.