[SOLUCIONADO] No Me Valida Campos

[mauricio1020]

Buenas tardes cordial saludo:

queria consultarles tengo el siguiente codigo y queria saber porque no me funciona la validacion de los campos con el atributo required de html5 este es l codigo:
muchas gracias

index

Código HTML:

<!-----------------------------------FORMULARIO DE REGISTRO DE USUARIOS-------------------------------------------->
                <form class="form-horizontal" id="formCliente">
                  <div class="form-group">
                    <label for="nombres" class="control-label col-xs-5">Nombres :</label>
                    <div class="col-xs-5">
                      <input  id="nombres" name="nombres" type="text"  class="form-control" placeholder="Ingrese sus Nombres">
                    </div>                  
                  </div>
                  <div class="form-group">
                    <label for="apellidos" class="control-label col-xs-5">Apellidos :</label>
                    <div class="col-xs-5">
                      <input id="apellidos" name="apellidos"  type="text" title="campos vacio" class="form-control" placeholder="Ingrese sus Apellidos" required>
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="email2" class="control-label col-xs-5">Email:</label>
                    <div class="col-xs-5">
                        <input id="email2" name="email2" type="email" class="form-control" placeholder="Ingrese su Email">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="pass" class="control-label col-xs-5">Contraseña:</label>
                    <div class="col-xs-5">
                        <input id="pass" name="pass" type="password" class="form-control" placeholder="Ingrese su Email">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="pass2" class="control-label col-xs-5">Repetir Contraseña:</label>
                    <div class="col-xs-5">
                        <input id="pass2" name="pass2" type="password" class="form-control" placeholder="Ingrese su Email">
                    </div>
                  </div>        
                </form>    
                <!---------------------------------------FIN FORMULARIO REGISTRO DE USUARIOS-------------------------------------------->
             
              </div>
              <div class="modal-footer">  
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                <button onclick="registrar();" type="button" class="btn btn-success">Guardar</button>
              </div>
 

javascript:

Código Javascript:

funcion javascript:
function registrar(){
var nombres = $('#nombres').val();
var apellidos = $('#apellidos').val();
var email = $('#email2').val();
var password = $('#pass').val();
var password2 = $('#pass2').val();
 
 
if (password===password2) {
 
$.ajax({
url:'../Controllers/usuario.php',
type:'POST',
data:'nombres='+nombres+'&apellidos='+apellidos+'& email='+email+'&password='+password+'&boton=regist rar'
}).done(function(resp){
if (resp==='exito') {
$('#exito').show(); 
document.getElementById("formCliente").reset(); 
}
else{
alert(resp);
}
});
}
else{
alert('no son iguales');
}
 

hay mas codigo pero pienso que no es necesario
lo que no me queda claro es si tendria que ejecutarse antes de llamar a la funcion javascript es decir que aparezca el recuadrito que me diga que tal campo es obligatorio en mi caso lo puse en apellidos.

[rodocoyote15]

Date una vuelta por aqui, http://codepen.io/creandoweb/pen/VYomJO

[mauricio1020]

Muchísimas gracias campeon