続いて，
submitイベントとキャンセル
addEvent(form,'submit',function(evt){
var noBlank = true;
var errors = [];
/* 中略 */
if (!noBlank || !matchedPass) {
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}
errorNode.style.display = 'block';
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(function(){
errorNode.style.display = 'none';
timer = null;
}, 3000);
}
});
エラーメッセージを表示し
では，
必須項目の値チェック
for (var i = 0;i < inputsLen; i++){
var input = inputNodes[i];
if (input.getAttribute('required') && !input.value) {
input.style.background = '#ffff66';
if(noBlank) {
input.focus();
noBlank = false;
}
errors.push(message[input.name]);
}
}
input.
先ほど配列に入れておいたpasswordの値が一致しているかチェックします。
パスワードのチェック
var matchedPass = passwords[0].value === passwords[1].value;
if (noBlank && !matchedPass) {
passwords[0].focus();
passwords[1].style.background = '#ffff66';
errorNode.innerHTML = 'パスワードが一致していません';
isError = true;
}
if (!noBlank) {
errorNode.innerHTML = errors.join('，')+'は必須です';
}
空の要素がある場合はそちらのメッセージを優先しています。errorNodeにinnerHTMLでメッセージを挿入しています。テキストの書き換えなので，
テキストノードの挿入
var textNode = document.createTextNode('パスワードが一致していません');
if (errorNode.firstChild) {
errorNode.replaceChild(textNode, errorNode.firstChild);
} else {
errorNode.appendChild(textNode);
}
少々長くなりましたが，
まとめ
初回限定の増量キャンペーンでお送りしましたがいかがでしたでしょうか？ 次回からはもう少しライトな内容にシフトする予定です。
なお，
