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