jquery - 带有验证引擎的 AJAX 联系表单 - jQuery

Question

我尝试使用 jQuery 和验证引擎插件通过 AJAX 制作联系表单 http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

验证有效，发送功能之前也有效......但是

问题是它无法发送表单，也无法从 OnAjaxFormComplete 回调，它将使用 jQuery“隐藏”表单。它用于开发。

转到http://bksn.mx/TAC/2/点击“Contacto”大标题，出现一个联系表格，试试吧。

我的表单 HTML:

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

这是我的脚本:

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,
    });
});

和我的 PHP 脚本:

<?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.";
    }
}
 ?>

有人可以帮助我吗？

提前致谢!

Answer 1

您是否已阅读并尝试过 github 上的常见问题解答:https://github.com/posabsolute/jQuery-Validation-Engine ？有一部分这样说:

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>

在上面发布的代码中，您没有提供任何操作作为参数。如果您对validationEngine使用任何选项，则必须使用“attach”作为第一个参数才能使插件正常工作!

您的代码应如下所示:

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