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

[GekoDH]

Hola, a ver si alguien me puede echar una manita, tengo un formulario cuyo contenido se envía mediante PHP por email, todo funciona a la perfección a excepción de que al enviar el formulario el mensaje de éxito/error aparece en una nueva página. Me gustaría poder validar el formulario con JS o JQuery antes de que el usuario le de a enviar (marcar en rojo los campos que están mal) y, una vez enviado el formulario, mostrar el mensaje de éxito debajo del botón sin recargar página.
A ver si alguien me puede explicar el tema este, darme alguna pista o decirme al menos por donde empezar para poder intentar continuar yo, sé que igual es mucho trabajo para pedirlo así por la cara pero es que ahora mismo estoy con el agua al cuello

HTML

Código:

<form action="envio.php" method="post">
                <label>Nombre </label>
                <input type="text" name="name"><br>
                <label>Email</label> 
                <input type="text" name="email"><br>
                <label>Teléfono</label> 
                <input type="text" name="phone"><br>
                <label>Mensaje</label>
                <textarea name="message"></textarea><br>
                <input id="submit" type="submit" name="submit" value="Enviar">
</form>

PHP

Código:

<?php 
if(isset($_POST['submit'])){
    $to = "[email protected]"; // email destinatario
    $from = $_POST['email']; // email del cliente
    $name = $_POST['name'];
    $phone = $_POST['phone'];
    $mes = $_POST['message'];
    $subject = "Formulario web";
    $subject2 = "Copia de su formulario de consulta";
    $message = $name . " con número de teléfono: " . $phone . " escribió lo siguiente:" . "\n\n" . $_POST['message'];
    $message2 = "Aquí tiene una copia de su mensaje " . $name . "\n\n" . $_POST['message'];

    $headers = "From:" . $from;
    $headers2 = "From:" . $to;
    $success = (preg_match("/^[0-9]{9}$/",$phone) && preg_match("/^[a-zA-Z]*$/",$name) && $mes!='' && filter_var($from, FILTER_VALIDATE_EMAIL));
    if ($success){
    mail($to,$subject,$message,$headers);
    mail($from,$subject2,$message2,$headers2); // copia para el cliente
        echo "Formulario enviado. Muchas gracias " . $name . ", en breve contactaremos con usted.";
    }
    else{
        echo "Lo sentimos, se ha producido un error al enviar el formulario, revise su contenido y vuelva a intentarlo.";
    }
   
}
?>

[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.

[GekoDH]

Muchas gracias, me ha servido de mucha ayuda y ya tengo un formulario bastante majo casi terminado :D