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

Html – How to prevent inputs from being invalid from start and input being valid when user inputs something

How to prevent inputs being invalid(because of css rule they’re all red) on load and why even after inputing value they don’t change to :valid.

const form = document.querySelector("#register-form");
const emailField = document.getElementById("email");
const countryField = document.getElementById("country");
const codeField = document.getElementById("code");
const passwordField = document.getElementById("password");
const repeatPasswordField = document.getElementById("repeat-password");
const errorSpan = document.querySelector("#error-span");

form.addEventListener("submit", (event) => {
  resetError();
  if (!emailField.validity.valid) {
    showError();
    event.preventDefault();
  }
});

function showError() {
  if (emailField.validity.valueMissing) {
    errorSpan.textContent = "Email missing!";
  }
}
function resetError() {
  errorSpan.textContent = "";
}
input:invalid {
  border: 2px dashed red;
}
input:valid {
  border: 2px solid black;
}
 <section>
      <form novalidate id="register-form">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"  required/>
        <label for="country">Country:</label>
        <input type="text" id="country" name="country" required/>
        <label for="code">Zip Code:</label>
        <input type="text" id="code" name="code"required />
        <label for="password">Password:</label>
        <input type="password" name="password" id="password" required/>
        <label for="repeat-password">Repeat password:</label>
        <input type="password" name="repeat-password" id="repeat-password" required/>
        <label>
        <button type="submit">Submit</button>
        <span id="error-span"></span>
      </form>
    </section>

I tried changing order of css rules but it didn’t work

Tags:

2

Answers


  1. 0

    You can apply the default rules to input, then set a red border for the :user-invalid pseudo-class (which will only match invalid fields once the user has interacted with them).

    input {
  border: 2px solid black;
}

input:user-invalid {
  border: 2px dashed red;
}
    <section>
  <form novalidate id="register-form">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required/>
    <label for="country">Country:</label>
    <input type="text" id="country" name="country" required/>
    <label for="code">Zip Code:</label>
    <input type="text" id="code" name="code" required />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" required/>
    <label for="repeat-password">Repeat password:</label>
    <input type="password" name="repeat-password" id="repeat-password" required/>
    <button type="submit">Submit</button>
    <span id="error-span"></span>
  </form>
</section>
    Login or Signup to reply.
  2. 0

    An alternative to the the pseudo-class user-invalid and invalid could be to set a class name when the form is checked for validation. In this case, when the user clicks the submit button. And then remove the class name again when the user start to type in the form field.

    const form = document.querySelector("#register-form");

form.addEventListener('invalid', e => {
  e.preventDefault();
  e.target.classList.add('invalid');
}, true);

form.addEventListener('input', e => {
  if (e.target.validity.valid) {
    e.target.classList.remove('invalid');
  }
  if (e.target.name == 'password') {
    e.target.form['repeat-password'].pattern = e.target.value;
  }
});

form.addEventListener('submit', e => {
  e.preventDefault();
  console.log('submitting...');
});
    form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

input.invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}
    <section>
  <form id="register-form">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required/>
    <label for="country">Country:</label>
    <input type="text" id="country" name="country" required/>
    <label for="code">Zip Code:</label>
    <input type="text" id="code" name="code" required />
    <label for="password">Password:</label>
    <input type="password" name="password" id="password" required/>
    <label for="repeat-password">Repeat password:</label>
    <input type="password" name="repeat-password" id="repeat-password" required/>
    <button type="submit">Submit</button>
    <output name="errorspan"></output>
  </form>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search