push item into array one at a time

Question

Is there anyway i can push more letter into the array and call them faster? I'm trying to code a validation form....... This works but it run one at time and moves to another when the condition is satisfied or input validated or not validated. Thats after click on submit... i need support in javascript. You can check the pic here. https://prnt.sc/g8IKHTGdF1s2.. . I was thinking of using while loop or for loop to add items (a, b etc) to the array but got stucked, dont know where to start

const errorsFVEd = () => {
  let errors = [];                                     


  const fnames = firstNam.value.trim();
  const lnames = lastNam.value.trim();
  const addys = Addy.value;
  const cits = CitNam.value;
  

  if (!isRequired(fnames)) {
    errors.push("a");
  } else if (!isAlphabet(fnames)) {
    errors.push("b");
  } else if (!isAlphabet(lnames)) {
    errors.push("d");
  } else if (!isRequired(lnames)) {
    errors.push("e");
  } else if (!isRequired(addys)) {
    errors.push("f");
  } else if (!isRequired(cits)) {
    errors.push("g");
  } else if (!isAlphabet(cits)) {
    errors.push("h");
  } else {
    console.log(1);
  }
  return errors;




}


function validaForm() {
    
    let errors = errorsFVEd();
  
  if (errors.length == 0) {
      
    document.getElementById("signup").submit();
      
  }
  else {

      
    for (i = 0; i < errors.length; i++){
      if (errors[i] == "a") {
        document.getElementById("error-first").innerHTML = "First name required.";
      } else if (errors[i] == "b") {
        document.getElementById("error-first").innerHTML = "Only alphabets allowed";
      } else if (errors[i] == "d") {
        document.getElementById("error-last").innerHTML = "Last name required.";
      } else if (errors[i] == "e") {
        document.getElementById("error-last").innerHTML = "Only alphabets allowed.";
      }else if (errors[i] == "f") {
        document.getElementById("error-addy").innerHTML = "Address required";
      } else if (errors[i] == "g") {
        document.getElementById("error-city").innerHTML = "City required";
      }else if (errors[i] == "h") {
        document.getElementById("error-city").innerHTML = "Invalid city";
      }else {
        console.log(1);
      }
      
      
    }
     
      
      
  }
      
  
}
``

Answer 1

Now, I didn't see the form, but I guess that it is something like the below example. Here I make use of the attributes required and pattern . A pattern is a regular expression and it is used for testing if the input is OK or not.

The second thing are the event listeners for the events input and invalid . So, on invalid the class name invalid is added to the input element (when trying to submit) and when starting to input something it is removed. This will make the span element show and hide.

 document.forms.form01.addEventListener('submit', e => { e.preventDefault(); console.log('submit'); }); document.forms.form01.addEventListener('input', e => { e.target.classList.remove('invalid'); }); document.forms.form01.addEventListener('invalid', e => { e.preventDefault(); e.target.classList.add('invalid'); }, true);

 form { display: flex; flex-direction: column; }.error { display: none; } input.invalid+span.error { display: inline; }

 <form name="form01"> <label>First: <input type="text" name="first" pattern="^\S{2,200}$" required> <span class="error">Only characters allowed (between 2 and 200).</span> </label> <label>Last: <input type="text" name="last" pattern="^\S{2,200}$" required> <span class="error">Only characters allowed (between 2 and 200).</span> </label> <label><button>Submit</button></label> </form>