Currently if an input field with the required attribute is empty, it will display the browser's default error message. If I remove this attribute, it will display a red border on the input field because of my JavaScript code. How would I display both at the same time?

$("form").submit(function(e) {
  e.preventDefault();
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 300);
  }
});

.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}

<script src=".1.1/jquery.min.js"></script>
<form>
  <input type="text" id="title">
  <input type="submit">
</form>

Currently if an input field with the required attribute is empty, it will display the browser's default error message. If I remove this attribute, it will display a red border on the input field because of my JavaScript code. How would I display both at the same time?

$("form").submit(function(e) {
  e.preventDefault();
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 300);
  }
});

.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="title">
  <input type="submit">
</form>

• javascript
• html
• css

• check this css-tricks./almanac/selectors/r/required – Orange Orange Commented Dec 11, 2017 at 17:47
• Likewise you're adding class you can show or hide the span before the fields ? – Naresh Kumar Commented Dec 13, 2017 at 17:04

4 Answers 4

You can implement it like this:

$("form").submit(function(e) {
  e.preventDefault();
  // ....
});

$("form input").on("invalid", function(event) {
  $('#title').addClass('error');
  setTimeout(function() {
    $('#title').removeClass('error');
  }, 500);
});

.error {
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="text" id="title" required>
  <input type="submit">
</form>

Use the CSS.

It is better to use it also for invalid fields (text in type=number field or any other invalid value).

@keyframes shake3 {
    0% {left: -5px}
    16% {left: 5px}
    33% {left: -5px}
    49% {left: 5px}
    66% {left: -5px}
    80% {left: 5px}
    100% {left: 0}
} /* And @keyframes with prefixes */

input:invalid {
  border: 2px solid red;
  animation-name: shake3;
  animation-duration: .4s;
  position: relative;
}

<input required >

If you want to show it only when you want, replace input:invalid by .submited input:invalid and add the .submited class to your form to activate styles.

function validate() {
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 300);
  }
}

.error {
  border: 5px solid red;
}

<form>
  <input type="text" id="title" required>
  <input type="submit" onclick="validate()">
</form>

Changed from onsubmit to onclick and added visibility/emphasis to the border for demonstration purposes - it was harder to see with 1px and the timeout window.

Maybe just use onclick on button?

Then in case validation is ok, then you could programatically invoke submit on form.

function validate() {
  var title = document.getElementById('title');
  if (!title.value) {
    title.classList.add('error');
    setTimeout(function() {
      title.classList.remove('error');
    }, 3000);
  } else {
     document.getElementById('form').submit()
  }
}

.error {
  border: 1px solid red;
}

<form id="form">
  <input type="text" id="title" required>
  <input type="submit" onclick="validate()">
</form>