Comment puis-je valider une entrée lorsque l'utilisateur saisit une entrée avant que l'envoi ne se fasse?

Question

Je le veux donc quand ils cliquent sur le bouton de soumission il va d'abord vérifier tous les champs avec class = "req" et s'il y en a un, il cessera de soumettre et de leur donner une erreur, sinon le soumettre devra passer.

Comment est-ce que je peux faire ceci?

Answer 1

Cela devrait le faire:

document.getElementById('myForm').onsubmit = function() { 
    var elems = document.getElementsByClassName('req'); 
    for(var i = 0; i < elems.length; i++) { 
     if(elems[i].value.length == 0) { 
      return false; 
     } 
    } 
} 

Cela va attacher la fonction à l'événement de présenter votre formulaire. Si l'un de ces éléments est vide, la fonction retournera false immédiatement, empêchant l'envoi du formulaire.

Si vous ne voulez pas les valeurs des espaces uniquement à être comptés comme remplie, vous pouvez remplacer la condition if dans ce qui précède avec ceci:

if(elems[i].value.replace(/^\s+|\s+$/g,"").length == 0) { 
    ... 

Answer 2

Ajout d'un gestionnaire d'événements « onsubmit » à la forme sera laissez-vous agir lorsque vous en avez besoin.

<form onsubmit="checkMyForm(this)"> 
    ... 
    </form> 

Ensuite, vous pouvez définir un gestionnaire

<script> 
    function checkMyForm(myForm) { 
    for (var i = 0; i < myForm.elements.length; ++i) { 
     var input = myForm.elements[i]; 
     if (/\breq\b/.test(input.className) && !input.value) { 
     // Has an empty required input 
     alert('Please enter all required inputs'); 
     input.focus(); 
     return false; // abort form submission 
     } 
    } 
    } 
    </script>