私のワードプレスのテーマでは、連絡先ページとコメントフォームでライブ入力検証を行っています。これは基本的に、正しいことを行うphpファイルへのajaxリクエストです。
また、ajaxify ( https://github.com/browserstate/ajaxify ) を使用して ajax ナビゲーションを構築することも選択しました。
ajaxify と一緒に使用すると、私のライブ入力検証が機能しなくなることを除いて、両方とも機能しています。
ここで私が話していることのライブデモを確認できます: http://www.deenastic.com
ホームから連絡先ページ (右上のリンクではなく、メイン メニューのリンク) に移動し、入力の 1 つに何かを入力しても、何も起こりません。次に、ページを更新して何かを入力すると、検証が機能します。
検証用に作成した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;
});