Предполагая, что метка находится на том же уровне иерархии DOM, что и вход, и что она находится рядом с входом в разметке, вы можете сделать что-то вроде этого.
Прежде всего, пример HTML:
<html>
<body>
<form onsubmit="return validation()" action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" value="" id="name" />
<label for="email">Email:</label>
<input type="text" value="" id="email" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Как видите, всем входам предшествует метка с правильным атрибутом for.
Теперь для Javascript, который будет идти в голове:
<script type="text/javascript">
function validation() {
//So we have a validation function.
//Let's first fetch the inputs.
name = document.getElementById("name");
email = document.getElementById("email");
//The variable error will increment if there is a validation error.
//This way, the form will not submit if an error is found.
error = 0;
//Now for validation.
if(name.value.length < 6) {
//We've found an error, so increment the variable
error++;
//Now find the corresponding label.
nameLabel = name.previousSibling;
//If we found the label, add an error class to it.
if(nameLabel && nameLabel.for = name.id) {
nameLabel.className = "error";
}
}
///////////////////
//Do the same with the email...
///////////////////
//Now, if there are no errors, let the form submit.
//If there are errors, prevent it from doing so.
return (error == 0) ? true : false;
}
</script>
Теперь просто добавьте немного CSS:
<style type="text/css">
.error {
background-color: red;
}
</style>
Редактировать - я думаю, вы не хотели такого решения, но если вы хотите, чтобы оно было проверено перед отправкой на сервер, то здесь. :)