JavaScript - Champ Obligatoire Formulaire HTML

Programmation JavaScript
, , , , , , , ,
1

Bonjour,

Comment je peux rendre un champ obligatoire dans un formulaire HTML avec JavaScript.

<form>
  <input type="text" id="name">
  <input type="submit">
</form>

Je voudrais rendre le champ « name » obligatoire.

2

Essayez le code suivant, pour rendre le champ « name » obligatoire.

Code HTML:

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

Code JavaScript:

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

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

Code CSS:

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

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

Vous pouvez voir le résultat du code ci-dessus en cliquant sur « Run Pen »

3

Voir aussi: