Validar HTML5 desde javascript

Una de las ventajas de HTML es que podemos hacer validaciones desde la misma página para verificar que los textos no estén vacíos, o que un elemento sea numérico, por ejemplo.

El problema consiste en que esa validación es a través de un formulario de HTML; si queremos utilizar ajax o javascript puro para que nosotros decidamos cuando se haga la validación en el navegador, no se puede; al menos no a primer vista.

Podemos utilizar la manera del siguiente fragmento de código.

<!--
onsubmit="event.preventDefault();
ES PARA EVITAR QUE MANDE EL FORM POR HTML Y CARGUE LA PAGINA DE NUEVO
-->
<form id="elfomulario" name="elfomulario" onsubmit="event.preventDefault();">
Fecha valida <br/>
<input type="date" name="fecha" required="required" />
<br/><br/>
Numero valido y olbigatorio<br/>
<input type="number" required="required" />
<br/> <br/>
Texto obligatorio<br/>
<input type="text" required="required" />
<!--
BUTTON EN LUGAR DE INPUT TYPE=TEXT PARA EJECUTAR EL SUBMIT DEL FORM
-->
<button onClick="valida()">Enviar</button>
</center>
</form>

<script>

function valida(){
//SE EJECUTA LA VALIDACION HTML
if (elfomulario.checkValidity()){
//SI LA VALDIACION ES CORRECTA ENTONCES EJECUTA EL SIGUIENTE CODIGO O PETICION AJAX
alert ("aqui ya se ejecutaria el ajax");
} else {
//HACER ALGO SI LA VALIDACIÓN FALLÓ
}
}
</script>

Cómo podemos ver, el formulario tiene la orden de no enviar la solicitud. En cuanto se de clic al botón enviar, o por cualquier otro medio que nosotros decidamos, ejecutamos una función en javascript, y este ejecutará la verificación de HTML5, si éste es válido, entonces nos permite ejecutar javascript o hacer llamados en ajax como jquery o mootools, por ejemplo. Además, si no pasa la verificación, también nos permite ejecutar algo.