Aanpassen input background color na validatie

Door Dieter Willems op 08-08-2012 21:41

1.250 views

Hallo,

ik heb een contact formulier waarin validatie van 'verplichte velden' dient te gebeuren. Deze validatie wordt uitgevoerd in een aparte file. Laat ons zeggen dat mijn contact formulier in de file 'contact.php' is uitgewerkt. De validatie wordt uitgevoerd door 'validator.php'. De Validator is een klasse die instantieerd wordt wanneer op de submit-button is geklikt.

Wat ik graag zou willen is dat wanneer een veld niet ingevuld is, de achtergrond kleur van het input field rood gekleurd wordt, ipv de standaard kleur.

Kan dit? (ik veronderstel van wel) En hoe kan/moet ik dit het best implementeren? Graag tips en evt een klein voorbeeldje in dien mogelijk.

Alvast bedankt,
Dieter

Reshad F

08-08-2012 22:05

Je zou dit met Javascript kunnen doen.

voorbeeldje:


<script language="javascript" type="text/javascript">
function validateForm(contactform)
{
var x=document.forms["contactform"]["naam"].value
if (x==null || x=="")
  {
  contactform.naam.style.backgroundColor="#FF9900";
  alert("vul uw voornaam in alstublieft");
  return false;
  }
}
</script>

en de bijbehorende form zou dan zoiets zijn


<form action="validate.php" method="post" name="contactform" id="contactform" onsubmit="return validateForm(this);">
Naam:
<input type="text" name="naam" id="naam" />        
<input type="submit" name="verzenden" id="verzenden" value="Verzenden" />
</form>

Dieter Willems

08-08-2012 22:54

Kan je de Javascript code ook implementeren in de Validator class of moet deze in de contact.php file geschreven worden?

Reageren

Inloggen om te reageren