Comment afficher un message requis à côté de l'entrée avec Javascript?

J'essaie de faire des champs requis mais je veux que l'erreur apparaisse à côté du champ, elle-même ne soit pas alerte?

Vous pouvez mettre des messages de validation près des input s que vous souhaitez valider comme

 <span class="reqMsg">* First name is required</span> 

Bien sûr, vous devez les cacher d'abord avec css

 .reqMsg { color:red; display:none; } 

Ensuite, dans votre formulaire, vous pouvez modifier votre code pertinent.

 var valid = true; var firstFocus = null; for (var i = 0; i < rules.length; i++) { if (!rules[i][1]) { valid = false; var parent = elem(rules[i][0]).parentNode; parent.children[2].style.display = "inline"; if (firstFocus == null) firstFocus = parent.children[1]; } } if (!valid) { firstFocus.focus(); return false; } return true; 

Vous pouvez voir qu'il ne renvoie pas false immédiatement si un champ n'est pas valide. Il vérifie tous les champs puis définit un focus sur le premier élément de ceux qui ne sont pas valides.

VIOLON

Ajouter l'étiquette d'extension à côté de l'étiquette d'entrée

 <span id="first-name-err"></span> 

Et modifiez le code javascript comme ci-dessous

 function alpha(e) { var k; document.all ? k = e.keyCode : k = e.which; return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8); } var flag = true; for (var i = 0; i < rules.length; i++) { alert(rules[i][0]); if (!rules[i][1]) { var parent = elem(rules[i][0]).parentNode, message = 'Please check your ' + (parent.textContent || parent.innerText).replace(/^\s*(.*?)\s*$/, '$1').slice(0, -1).toLowerCase() + '.'; var id = rules[i][0]+'-err'; document.getElementById(rules[i][0]+'-err').innerHTML = message; flag = false; } } return flag; }; 

Vérifiez ceci