I am learning JS and using it to tinker with websites. In the below code I want to change the colour of the placeholder which comes after an invalid entry is made.
<script>
// when the DOM is ready
$(document).ready(function() {
// make an array of invalid domains
const invalidDomains = ['gmail.com', 'yahoo.com', 'hotmail.com', 'aol.com', 'hotmail.co.uk', 'hotmail.fr', 'msn.com', 'yahoo.fr', 'wanadoo.fr', 'orange.fr', 'comcast.net', 'yahoo.co.uk', 'yahoo.com.br', 'yahoo.co.in', 'live.com', 'rediffmail.com', 'free.fr', 'gmx.de', 'web.de', 'yandex.ru', 'ymail.com', 'libero.it', 'outlook.com', 'uol.com.br', 'bol.com.br', 'mail.ru', 'cox.net', 'hotmail.it', 'sbcglobal.net', 'sfr.fr', 'live.fr', 'verizon.net', 'live.co.uk', 'googlemail.com', 'yahoo.es', 'ig.com.br', 'live.nl', 'bigpond.com', 'terra.com.br', 'yahoo.it', 'neuf.fr', 'yahoo.de', 'alice.it', 'rocketmail.com', 'att.net', 'laposte.net', 'facebook.com', 'bellsouth.net', 'yahoo.in', 'hotmail.es', 'charter.net', 'yahoo.ca', 'yahoo.com.au', 'rambler.ru', 'hotmail.de', 'tiscali.it', 'shaw.ca', 'yahoo.co.jp', 'sky.com', 'earthlink.net', 'optonline.net', 'freenet.de', 't-online.de', 'aliceadsl.fr', 'virgilio.it', 'home.nl', 'qq.com', 'telenet.be', 'me.com', 'yahoo.com.ar', 'tiscali.co.uk', 'yahoo.com.mx', 'voila.fr', 'gmx.net', 'mail.com', 'planet.nl', 'tin.it', 'live.it', 'ntlworld.com', 'arcor.de', 'yahoo.co.id', 'frontiernet.net', 'hetnet.nl', 'live.com.au', 'yahoo.com.sg', 'zonnet.nl', 'club-internet.fr', 'juno.com', 'optusnet.com.au', 'blueyonder.co.uk', 'bluewin.ch', 'skynet.be', 'sympatico.ca', 'windstream.net', 'mac.com', 'centurytel.net', 'chello.nl', 'live.ca', 'aim.com', 'bigpond.net.au' ];
// get the submit button
const submitBtn = $('.submit-button-3');
// on submit button click
submitBtn.click(()=>{
// get the email field
const email = $('.text-field-2');
// split email at '@' character to get domain
const domainPart = email.val().split('@')[1];
// if the domain exists in the invalidDomains array
if(invalidDomains.indexOf(domainPart) !== -1) {
// clear email field
email.val('');
// add a 'use business mail' placeholder
email.attr('placeholder','Please enter a work email');
// prevent form submission
return false;
}
else{ // else if email is not invalid
// submit form
return true;
}
});
});
</script>try change class of your input on invalid domains like this
email.addClass( "invalid" );
and add css for .invalid like this
::placeholder {
color: black;
}
.text-field-2.invalid::placeholder {
color: red;
}