Question

在我的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 = '&nbsp;';
                        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 = '&nbsp;';
                        t.parentNode.appendChild(icon);
                        t.style.borderColor = "#e74c3c";    
                    }
                }
            });
        }, 200);
    }
    this.lastValue = this.value;
});

Answer 1

可以通过使用jquery验证引擎来实现。在ajax请求之后再次调用jquery验证引擎。也改变你改变功能到改变生活。像这样：

 $('#contact-form input').live('change',function(){
       $(this).validate();
    });

Answer 2

我通过改变

来实现它

这个

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

到

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

感谢帮助人员

jQuery没有用ajax导航执行

2 个答案: