在我的 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;
});