0

在我的 wordpress 主题中,我在联系页面和评论表单上都有实时输入验证。它基本上是对 php 文件的 ajax 请求,它做正确的事情。

我还选择使用 ajaxify ( https://github.com/browserstate/ajaxify ) 来构建 ajax 导航。

这两件事都有效,除了与 ajaxify 一起使用时,我的实时输入验证不再起作用。

你可以在这里查看我在说什么的现场演示:http: //www.deenastic.com

如果您从主页导航到联系页面(主菜单中的链接,而不是右上角的链接)并在其中一个输入中输入内容,则不会发生任何事情。然后,如果您刷新页面并输入一些内容,您将获得验证工作。

这是我为验证所做的 jQuery(如果它有助于理解问题):

    $('#contact-form input').change(function() {

    var t = this;
    var ajaxUrl = $('#contact-form').attr('action');

    if (this.value != this.lastValue)
    {   
        if (this.timer)
            clearTimeout(this.timer); // this is to prevent ajax request being fired is someone is holding a key (it will fire when it'll be released)
        // todo: append ajax loader

        this.timer = setTimeout(function() { // Fire ajax request in 1/5 second
            $.ajax({
                url: ajaxUrl,
                data: 'action=validate_'+t.name+'&data='+t.value,
                dataType: 'text',
                type: 'post',
                success : function(data) {
                    if (data == 'ok')
                    {
                        var span = t.parentNode.lastChild;
                        if (span.className == 'error') // do we had an error before ?
                            t.parentNode.removeChild(span);

                        // creates our new elem
                        var icon = document.createElement('span');
                        icon.setAttribute('class', 'check');
                        icon.innerHTML = ' ';
                        t.parentNode.appendChild(icon);
                        t.style.borderColor = "#1abc9c";
                    }
                    else
                    {
                        var span = t.parentNode.lastChild;
                        if (span.className == 'check')
                            t.parentNode.removeChild(span);

                        // creates our new elem
                        var icon = document.createElement('span');
                        icon.setAttribute('class', 'error');
                        icon.innerHTML = ' ';
                        t.parentNode.appendChild(icon);
                        t.style.borderColor = "#e74c3c";    
                    }
                }
            });
        }, 200);
    }
    this.lastValue = this.value;
});
4

2 回答 2

0

我通过改变让它工作

这个

$('#contact-form input').change(function() {

  $(document).on('change', '#contact-form input', function(e) {

谢谢你们的帮助

于 2013-08-13T14:30:50.013 回答
0

它可以通过使用jquery验证引擎来实现。在 ajax 请求后再次在输入上调用 jquery 验证引擎。还将您更改功能更改为实时更改。像这样:

 $('#contact-form input').live('change',function(){
       $(this).validate();
    });
于 2013-08-13T14:18:00.367 回答