How can I make my input border colors red when they fail validation? (Vanilla JavaScript only)

Admin 1
Viewed 1960

So I have a few text inputs on a form, and I'd like to make the borders glow red when the user tries to submit the form and the inputs do not meet a specific criteria. The criteria is that the fields cannot be empty, and if they are, the form will take the users back to the field and show a red border.

Below is what I've got so far, but not only do the styles not show up, but the fields disappear.

What do I need to change?

const submitButton = document.getElementById('submitButton');
const name = document.getElementById('name');
const email = document.getElementById('email');

function nameValidation() {
    if (name.value == 0) {
        name.style.borderColor = "red solid 5px";
    }
}

function emailValidation() {
    if (email.value == 0) {
        email.style.borderColor = "red solid 5px";
    }
}

submitButton.addEventListener('click', () => {
    nameValidation();
    emailValidation();
});
<form action="index.html" novalidate>
      <fieldset>
      
        <label for="name">Name:</label>
          <input type="text" id="name">

        <label for="mail">Email:</label>
          <input type="email" id="email">
          
      </fieldset>
      
      <button id="submitButton">Register</button>
</form>

forms styles html javascript
1 Answers

HTML Buttons have a default behaviour, due to which it refreshes the entire page and that is the reason why your form vanishes. To prevent that, you just need to use event.preventDefault() like I've done below in the Submit button event handler function.

Secondly, the reason your CSS doesn't apply is because you are trying to add '5px solid' to the border-color CSS property. border-color only accepts color as input. If you need to set other properties you need to do it on border.

Also, you are comparing the value of name.value and email.value to 0. You should instead do it with empty string ''. However, empty string is a falsy value in Javascript, so even if you just say name.value and value is empty string ('') then it will be false in an if condition. All you need to do is if(!name.value) i.e. if name.value is not true, then execute condition.

const submitButton = document.getElementById('submitButton');
const name = document.querySelector('#name');
const email = document.querySelector('#email');

function nameValidation() {
  if (!name.value) {
    name.style.border = '5px solid';
    name.style.borderColor = 'red';
  }
}

function emailValidation() {
  if (!email.value) {
    email.style.border = '5px solid';
    email.style.borderColor = 'red';
  }
}

submitButton.addEventListener('click', e => {
  e.preventDefault();
  nameValidation();
  emailValidation();
});
<form action="index.html" novalidate>
          <fieldset>
            <label for="name">Name:</label>
            <input type="text" id="name" />

            <label for="mail">Email:</label>
            <input type="email" id="email" />
          </fieldset>

          <button id="submitButton">Register</button>
        </form>

user_143863320
Related