Question

I tried to make an contact form via AJAX with jQuery and Validation Engine Plug in http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

The validation worked and before to send function worked too… but

The problem is that it cannot send form and it couldn’t callback from OnAjaxFormComplete that it will “hide” the form using jQuery. It’s used for development.

Go to http://bksn.mx/TAC/2/ click “Contacto” big title, it appears a contact form, try it.

My HTML of form:

    <form id="formID" method="post" action="submit.php">
<div class="ajax">
        <div class="idealWrap">
            <label for="nombre">nombre:</label>
            <input value="" class="validate[required] text-input" type="text" name="nombre" id="nombre"/>
        </div>

        <div class="idealWrap">
            <label for="email">email:</label>
            <input value="" class="validate[required,custom[email]]" type="text" name="email" id="email"/>
        </div>

        <div class="idealWrap">
            <label for="tel">teléfono:</label>
            <input value="" class="validate[custom[phone]] text-input" type="text" name="tel" id="tel" />
        </div>



        <div class="idealWrap">
            <label for="mensaje">mensaje:</label>
            <textarea value="" class="validate[required] text-input" name="message" id="message" ></textarea>
        </div>      

        <div class="idealWrap">
            <label>&nbsp;</label>
            <input type="submit" id="submit" value=""/>
        </div>
</div>
    </form>

There is my script:

function beforeCall(form, options) {
    if (window.console)
        alert("Right before the AJAX form validation call");
    return true;
}

// Called once the server replies to the ajax form validation request

function ajaxValidationCallback(status, form, json, options) {
    if (window.console)
        console.log(status);

    if (status === true) {
        $('#formID').hide();
        // uncomment these lines to submit the form to form.action
        // form.validationEngine('detach');
        // form.submit();
        // or you may use AJAX again to submit the data
    }
}

jQuery(document).ready(function () {
    jQuery("#formID").validationEngine({
        promptPosition: 'centerRight',
        scroll: false,
        ajaxFormValidation: true,
        onBeforeAjaxFormValidation: beforeCall,
        onAjaxFormComplete: ajaxValidationCallback,
    });
});

and my PHP script:

<?php
$aviso = "";
if ($_POST['email'] != "") {
    // email de destino
    $email = "vagnok@gmail";

    // asunto del email
    $subject = "Contacto";

    // Cuerpo del mensaje
    $mensaje = "---------------------------------- \n";
    $mensaje.= "            Contacto               \n";
    $mensaje.= "---------------------------------- \n";
    $mensaje.= "NOMBRE:   ".$_POST['nombre']."\n";
    $mensaje.= "EMAIL:    ".$_POST['email']."\n";
    $mensaje.= "TELEFONO: ".$_POST['tel']."\n";
    $mensaje.= "FECHA:    ".date("d/m/Y")."\n";
    $mensaje.= "HORA:     ".date("h:i:s a")."\n";
    $mensaje.= "IP:       ".$_SERVER['REMOTE_ADDR']."\n\n";
    $mensaje.= "---------------------------------- \n\n";
    $mensaje.= $_POST['mensaje']."\n\n";
    $mensaje.= "---------------------------------- \n";
    $mensaje.= "Enviado desde TAC  \n";

    // headers del email
    $headers = "From: ".$_POST['email']."\r\n";

    // Enviamos el mensaje
    if (mail($email, $subject, $mensaje, $headers)) {
        $aviso = "Su mensaje fue enviado.";
    } else {
        $aviso = "Error de envío.";
    }
}
 ?>

Anyone can help me?

Thanks in advance!

Answer 1

Have you read and tried the FAQ on github: https://github.com/posabsolute/jQuery-Validation-Engine ? There is a part where it says:

When using options, the default behavior is to only initialize
ValidationEngine, so attachment needs to be done manually.

<script>
$(document).ready(function(){
$("#formID").validationEngine('attach', {promptPosition : "centerRight", scroll: false});
});
</script>

In the code posted above you aren’t supplying any action as parameter. If you use any options for validationEngine you have to use “attach” as first parameter to enable the plugin to work!

Your code should look like this:

jQuery(document).ready(function () {
    jQuery("#formID").validationEngine('attach', {
        promptPosition: 'centerRight',
        scroll: false,
        ajaxFormValidation: true,
        onBeforeAjaxFormValidation: beforeCall,
        onAjaxFormComplete: ajaxValidationCallback,
    });
});