与验证引擎AJAX接触形式 ​​- 的jQuery [英] AJAX contact form with Validation Engine - jQuery

问题描述

我试图通过AJAX作出的联系方式与jQuery和验证引擎插入<一href="http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/" rel="nofollow">http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

验证工作，之前发送功能工作太...但

现在的问题是，它不能发送的形式，并从 OnAjaxFormComplete ，这将隐藏的形式使用jQuery它不能回调。它用于发展。

转到 http://bksn.mx/TAC/2/ 单击CONTACTO大标题，似乎一个接触的形式，试试吧。

我的HTML表单：

 ＆LT;形式ID =formID方法=邮报行动=submit.php＆GT;
＆LT; D​​IV CLASS =AJAX＆GT;
        ＆LT; D​​IV CLASS =idealWrap＆GT;
            ＆LT;标签=NOMBRE＆GT; NOMBRE：LT; /标签＆gt;
            ＆LT;输入值=级=验证[要求]的文本输入型=文本名称=NOMBREID =NOMBRE/＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; D​​IV CLASS =idealWrap＆GT;
            ＆LT;标签=电子邮件＆GT;电子邮件：LT; /标签＆gt;
            ＆LT;输入值=级=验证[需要，自定义[邮件]类型=文本名称=电子邮件ID =电子邮件/＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; D​​IV CLASS =idealWrap＆GT;
            ＆LT;标签=联系电话＆GT;teléfono：LT; /标签＆gt;
            ＆LT;输入值=级=验证[自定义[电话]文本输入型=文本名称=电话ID =电话/＆GT;
        ＆LT; / DIV＆GT;



        ＆LT; D​​IV CLASS =idealWrap＆GT;
            ＆LT;标签=mensaje＆GT; mensaje：LT; /标签＆gt;
            ＆LT; textarea的价值=级=验证[要求]的文本输入NAME =消息ID =消息＆GT;＆LT; / textarea的＆GT;
        ＆LT; / DIV＆GT;

        ＆LT; D​​IV CLASS =idealWrap＆GT;
            ＆LT;标签＆gt;＆安培; NBSP;＆LT; /标签＆gt;
            ＆LT;输入类型=提交ID =提交值=/＆GT;
        ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
    ＆LT; /形式GT;
 

还有就是我的脚本：

 函数beforeCall（表格，选项）{
    如果（window.console）
        警报（右前的AJAX表单验证电话）;
    返回true;
}

//调用一次服务器回复的Ajax表单验证请求

功能ajaxValidationCallback（状态，形式，JSON，期权）{
    如果（window.console）
        执行console.log（状态）;

    如果（状态===真）{
        $（'＃formID）隐藏（）。
        //取消注释这些行提交表单到form.action
        // form.validationEngine（'分离'）;
        // form.submit（）;
        //或者你可以使用AJAX再次提交数据
    }
}

jQuery的（文件）。就绪（函数（）{
    jQuery的（＃formID）。validationEngine（{
        promptPosition：centerRight，
        滚动：假的，
        ajaxFormValidation：真正的，
        onBeforeAjaxFormValidation：beforeCall，
        onAjaxFormComplete：ajaxValidationCallback，
    }）;
}）;
 

和我的PHP脚本：

 ＆LT; PHP
$说Aviso =;
如果（$ _ POST [电子邮件]！=）{
    //电子邮件德DESTINO
    $电子邮件=vagnok @ gmail的;

    // asunto删除电子邮件
    $主题=CONTACTO;

    // Cuerpo德尔mensaje
    $ mensaje =---------------------------------- \ N的;
    $ mensaje =CONTACTO \ N。
    。$ mensaje =---------------------------------- \ N的;
    $ mensaje =NOMBRE：$ _ POST ['NOMBRE']\ N;。
    $ mensaje =电子邮件：。$ _ POST [电子邮件]\ N的;
    $ mensaje =TELEFONO：。$ _ POST ['电话']\ N的;
    。$ mensaje =出生日期：.date（D / M / Y）\ N的;
    。$ mensaje =HORA：.date（H：我：s的）\ N。
    $ mensaje =IP：$ _ SERVER ['REMOTE_ADDR']\ñ\ N;。
    。$ mensaje =---------------------------------- \ñ\ N的;
    $ mensaje = $ _ POST ['mensaje']\ñ\ N。;
    。$ mensaje =---------------------------------- \ N的;
    。$ mensaje =Enviado TAC修订于\ N的;

    //头删除电子邮件
    $标题=发件人：。$ _ POST [电子邮件]\ r \ N的;

    // Enviamos埃尔mensaje
    如果（电子邮件（$电子邮件，$主题，$ mensaje，$头））{
        $说Aviso =苏mensaje FUE enviado;
    } 其他 {
        $说Aviso =错误去envío。
    }
}
 ？＆GT;
 

任何人都可以帮我吗？

在此先感谢！

解决方案

你读过，并试图在GitHub上的常见问题解答：的 https://github.com/posabsolute/jQuery-Validation-Engine ？有部分地方说：

  

在使用选项，默认行为是只初始化   ValidationEngine，这样依恋需要手动完成

 ＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（＃formID）validationEngine（'附加'，{promptPosition：centerRight，滚动：假}）。
}）;
＆LT; / SCRIPT＆GT;
 

在code上面贴你不提供任何操作的参数。如果您使用任何选项validationEngine你必须使用附加作为第一个参数启用插件工作！

您code应该是这样的：

  jQuery的（文件）。就绪（函数（）{
    jQuery的（＃formID）。validationEngine（'附加'，{
        promptPosition：centerRight，
        滚动：假的，
        ajaxFormValidation：真正的，
        onBeforeAjaxFormValidation：beforeCall，
        onAjaxFormComplete：ajaxValidationCallback，
    }）;
}）;
 

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!

解决方案

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

这篇关于与验证引擎AJAX接触形式 ​​- 的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！