Agregar clase a una entrada en foco - html5

Estoy buscando algo de ayuda, tengo esta entrada

<div class="input-field section scrollspy col s12 m12 l6">
<i class="material-icons prefix">today</i>
<input name="INICIO" id="fechaInicio" type="text" class="datepicker" minlength=10 placeholder="##-##-####" pattern="[0-9-]{10}">
<label for="fechaInicio" data-error="Incorrecto" data-success="Correcto" class="active">Fecha de Nacimiento</label>
</div>

Y quiero agregarle la clase "válida", cuando esté enfocada, pero no sé mucho sobre Jquery. ¿Alguien me puede ayudar a resolver mi pequeño problema? Gracias.

Respuestas

Puedes usar el siguiente jQuery. Solo usa el focusin() (equivalente a onfocus) y focusout() (equivalente a onblur) controladores de eventos para agregar y eliminar clases (addClass() y removeClass(), respectivamente).

EDITAR Actualizado para mostrar el uso adecuado de jQuery también.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var input = $("input[name=INICIO]");
input.focusin(function() {
$(this).addClass("valid");
});
input.focusout(function() {
$(this).removeClass("valid");
});
</script>

Ver un ejemplo de trabajo en JSFiddle.net.