ejecutar fancybox despues del submit

[GusGarsaky]

El código que has puesto explica tu consulta. Te dejo un ejemplo de lo que deberías hacer:

Código Javascript:

document.querySelector('#tuform').addEventListener('submit', function(e) {
    e.preventDefault(); // previene el submit predeterminado
 
    // obtienes la info del formulario y la agregas al objeto
    var data = {}
    data['nombre'] = document.querySelector('#txtname');
    data['apellido'] = document.querySelector('#txtlastname');
    data['dni'] = document.querySelector('#txtdni');
 
    // envías los datos por AJAX
    var xhr = new XMLHttpRequest();
    // esta ruta es el destino de la petición
    xhr.open('POST', 'ruta/al/script', true);
    // habilita el envío de json
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.onload = function() {
        if(xhr.status == 200) {
            $("#modalGracias").show();
                       $.fancybox({
                          autoSize: true,
                          scrolling: "no",
                          href : "gracias.html",
                          type: "iframe"
                       });       
        } else {
            // muestras el diálogo Error
        }
    }
    // envías la info
    xhr.send('info='+data);
});
 

Para validar, puedes hacerlo por expresiones regulares. Por ejemplo, para validar un DNI de 8 dígitos:

Código HTML:

<input type="text" id="txtdni" pattern="^(?!\s*$)[0-9\s]{8}$" />