if else 条件を使用して、単純な純粋な JavaScript フォーム検証を作成しました。検証機能は、ユーザー入力と入力フィールドに入力された文字数をチェックします。
空の場合はフォーカスされた入力フィールドの下にエラーメッセージがポップアップ表示され、入力がある場合は条件を満たすまでその長さをチェックします。
私が知りたかったのは、JavaScript コードが最初の入力フィールドのみを検証し、残りは検証しない理由です。
学習目的で、basistance jquery プラグイン、jquery 検証フォームなどを含む独自の検証関数を作成しているため、javascript 検証ライブラリを投稿しないでください。
Javascript:
function validateForm(){
var firstname = document.getElementById("firstname"),
lastname = document.getElementById("lastname"),
email = document.getElementById("email"),
firstnameLength = firstname.value.length,
checkLengthLast = lastname.value.length;
if(firstname == isEmpty){
errorFirstname();
firstname.focus();
return false;
} else if(firstname.value != isEmpty){
checkLengthFirst();
firstname.focus();
return false;
} else if(lastname.value == isEmpty){
errorLastname();
lastname.focus();
return false;
} else if (lastname.value != isEmpty){
checkLastName();
lastname.focus();
return false
} else if(email.value == isEmpty){
alert("Please fill in your email");
document.PersonDetails.email.focus();
return false;
} else {
return true;
}
function isEmpty(){
this.value == 0;
}
function errorFirstname(){
var errorpara = document.createElement("p");
errorpara.innerHTML = "Please fill in your firstname";
firstname.parentNode.insertBefore(errorpara, firstname.nextSibling);
setInterval(function (){
errorpara.style.display = "none";
}, 2000);
return false;
}
function checkLengthFirst(){
if(firstnameLength <= 2){
var errorpara = document.createElement("p");
errorpara.innerHTML = "Name must be more than 2 characters";
firstname.parentNode.insertBefore(errorpara, firstname.nextSibling);
setInterval(function (){
errorpara.style.display = "none";
}, 2000);
}
return false;
}
function errorLastname(){
var errorpara = document.createElement("p");
errorpara.innerHTML = "Please fill in your lastname";
setInterval(function (){
lastname.parentNode.insertBefore(errorpara, lastname.nextSibling);
}, 2000);
return false;
}
function checkLengthLast(){
if(lastnameLength <= 2){
var errorpara = document.createElement("p");
errorpara.innerHTML = "Name must be more than 2 characters";
lastname.parentNode.insertBefore(errorpara, lastname.nextSibling);
setInterval(function (){
errorpara.style.display = "none";
}, 2000);
}
return false;
}
return true;
}
HTML :
<form id="register" name="PersonDetails" onsubmit="return validateForm();" method="post" action="">
<div>
<label>Firstname :</label>
<label>Lastname :</label>
<label>Email :</label>
</div>
<div>
<input type="text" name="firstname" id="firstname" value="" />
<input type="text" name="lastname" id="lastname" value="" />
<input type="text" name="email" id="email" value="" />
<input class="submit" type="submit" name="submit"/>
</div>
</form>
よろしくお願いいたします。