AJAX与验证引擎的联系表 - jQuery

时间:2011-10-27 07:14:31

标签: jquery ajax forms

我尝试使用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.";
    }
}
 ?>

任何人都可以帮助我?

提前致谢!

1 个答案:

答案 0 :(得分:4)

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

  

使用选项时,默认行为是仅初始化   ValidationEngine,因此需要手动完成附件

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