This is my function

function checkEmpty()
{
    var input = document.getElementsByClassName("input");
    for (var i = 0; i < input.length; i   )
    {
        if (input[i].value.length <= 0)
        {
            input[i].classList.add("error-class");
            return false;
        }
        else
        {
            input[i].classList.remove("error-class");
            return true;
        }
    }
}

This is my form

<div id="form-div">
    <form action="#" method="POST" onsubmit="return checkEmpty()">
          <input type="text"  placeholder="First Name"/> </label>
          <input type="password"  placeholder="Password"/> </label><br>
          <input type="submit"  id="button" value="CLAIM YOUR FREE TRIAL"/><br>
     </form>
  </div>

This is the class to be applied

.error-class
{
    background-image: url("../Registration-form/images/icon-error.svg");
    background-repeat: no-repeat;
}

I've had difficult time because I'm new to javascript.

CodePudding user response：

I think you need to disable submission if there is any input field empty, So you need to remove the return true/false from the loop as this will stop the function execution and break the loop, and you need to add a flag called valid and check if there is any field is empty set the valid flag to false and at the end of the function you check if the valid is false disable submission by return false

function checkEmpty(e)
{
    var input = document.getElementsByClassName("input");
    let valid = true;
    for (var i = 0; i < input.length; i   )
    {
        if (input[i].value.length <= 0)
        {
            input[i].classList.add("error-class");
            valid = false;
        }
        else
        {
            input[i].classList.remove("error-class");
        }
    }
    if (!valid) {
      return false;
    }
}

.error-class
{
    background-image: url("../Registration-form/images/icon-error.svg");
    background-repeat: no-repeat;
    background-color: red; /* This for test you can remove it */
}

<div id="form-div">
    <form action="#" method="POST" onsubmit="return checkEmpty(event)">
          <input type="text"  placeholder="First Name"/> </label>
          <input type="password"  placeholder="Password"/> </label><br>
          <input type="submit"  id="button" value="CLAIM YOUR FREE TRIAL"/><br>
     </form>
  </div>

CodePudding user response：

Use classList.toggle

You could simplify your code by using classList.toggle rather add and remove. Toggle takes a second argument "force" that when true applies the class and when false removes it.

You will also need to use querySelectorAll to get a list of inputs within the form and then loop through them using forEach:

function checkEmpty() {
  document.querySelectorAll("#form-div .input").forEach(item => {
    item.classList.toggle("error-class", !item.value);
  });
}

You might also consider using the built-in pseudo classes :valid and :invalid. See this related question for details:

Javascript onchange validation so that :valid and :invalid CSS selectors work

Snippet

Review and run the snippet to understand how it works. The snippet includes additional code to prevent submitting the form when checkEmpty() returns false, signaling an invalid field(s).

function checkEmpty() {
  let valid = true;
  document.querySelectorAll("#form-div .input").forEach(item => {
    if (!item.value) valid = false;
    item.classList.toggle("error-class", !item.value);
  });
  return valid;
}

document.querySelector("#form-div form")
  .addEventListener("submit", function(event) {
      if (!checkEmpty()) {
        event.preventDefault();
        console.log("form submit cancelled");
        return;
      }
      console.log("form submitted");
});

button.click(); //test

.error-class {
  border-color: red;
}

<div id="form-div">
  <form action="#" method="POST" onsubmit="return checkEmpty()">
    <input type="text"  placeholder="First Name" /> </label>
    <input type="password"  placeholder="Password" /> </label><br>
    <input type="submit"  id="button" value="CLAIM YOUR FREE TRIAL" /><br>
  </form>
</div>