J'ai donc fait une validation de formulaire JavaScript où je reçois un message d'alerte si rien n'est écrit dans le formulaire. Au lieu d'un message d'alerte, je veux une zone de texte couleur (rouge / vert). Lorsque vous n'écrivez rien et essayez de le soumettre, vous obtenez une boîte rouge avec un message. Lorsque vous écrivez ce que vous devez écrire et le soumettre, vous obtenez une boîte verte.
function validateFormC() {
let x = document.forms["contactForm"]["name_contact"].value;
if (x === "") {
alert("Don't forget to write down your name!");
return false;
}
3 Réponses :
Vous pouvez créer un sélecteur de classe en CSS: puis dans votre JavaScript, vous pouvez sélectionner l'élément et ajouter cette classe à celui-ci: P> // With Vanilla JavaScript
document.getElementById('input_id').classList.add('red-input');
// With jQuery
$('#input_id').addClass('red-input')
Ok merci je l'obtiens. Mais que dois-je changer dans ma fonction ci-dessus maintenant? J'ai essayé certaines choses mais ça ne marche pas vraiment. Ne peut pas sembler comprendre ..
Vous avez besoin de quelque chose dans les lignes de: puis créez un style CSS correspondant: warnmessage probablement avec BGColor: rouge;
De même pour votre message de réussite, mais vert.
Essayez quelque chose comme ça. Vous pouvez modifier BorderColor en arrière-planColor si vous préférez.
function validateFormC() {
var x = document.forms["contactForm"]["name_contact"];
if (x.value === "") {
alert("Don't forget to write down your name!");
x.style.borderColor = 'red';
return false;
}
else
x.style.borderColor = 'green';
}
Utilisez des cours pour le style.
Vous pouvez simplement configurer des classes CSS et modifier vos classes d'entrée à l'aide de
INPUTELYE.CLASSLIST