Formulario que se envía por email, validación en JS y mostrar mensaje

[Alexis88]

Antes de que se realice el envío de los datos del formulario, debes de cancelar el evento submit, el cual se ejecuta al momento de enviar los datos del formulario a procesarse. Para esto, debes de usar el método preventDefault. Luego de esto, puedes usar ya sea códigos ASCII o expresiones regulares para realizar las validaciones.

Por ejemplo, supongamos que el formulario tuviera un solo campo de texto y deseas que solamente contenga letras del alfabeto inglés (sin eñes, tildes ni diéresis) y espacios, esta sería la manera de hacerlo con expresiones regulares (la cual me parece más conveniente que usar códigos ASCII):

Código HTML:

<form id = "id_form">
    Texto: <input type = "text" name = "ejemplo" />
    <input type = "submit" />
</form>
 

Código Javascript:

var form = document.querySelector("#id_form"), //Tomo al formulario
    input = form.ejemplo, //Tomo a la caja de texto
    patron = /^[a-z\s]+$/gi; //Expresión regular de validación
 
form.addEventListener("submit", function(event){ //Cuando se intente enviar los datos
    event.preventDefault(); //Cancelo el envío
 
    if (patron.test(input.value)){ //Si el texto escrito concuerda con la expresión regular
        form.submit(); //Envío los datos del formulario
    }
    else{ //Caso contrario
        input.style.border = "1px red solid"; //Le añado un borde rojo a la caja de texto
    }
}, false);
 

La expresión regular consiste de lo siguiente:

• ^: Inicio de la cadena.
• $: Fin de la cadena.
• a-z: Rango de letras de la A a la Z.
• \s: Espacio en blanco.
• []: Para crear un grupo de caracteres.
• +: De una a más coincidencias.
• g: Modificador de patrón para realizar una búsqueda global.
• i: Modificador de patrón para realizar una búsqueda sin distinguir entre mayúsculas y minúsculas.

En el ejemplo, utilizo el método test para comparar a la expresión regular con el valor de la caja de texto. Este método devuelve true cuando todo concuerda y false cuando no es así. También hay otros métodos que puedes usar, como match, compile y exec.

También puedes realizar validaciones con los atributos pattern y required de HTML5, con los cuales te ahorrarías todas estas líneas de código. La única desventaja está en que si el usuario accede desde un navegador que no tenga soporte para el estándar HTML5, no surtirá efecto y, en ese caso, tendrías que echar mano de JavaScript.

No olvides validar del lado del servidor.

Saludos

EDITO: Como deseas que no se recargue la página al realizar el envío, necesitas realizar una petición asíncrona.