部分的な検証が実行されました

Question

フォームで検証をほとんど試行しようとしていますが、これはマークまでではありません。私は名前のエラーメッセージメッセージを隠し、電子メールエラーだけを表示する必要があります。しかし、それは起こっていません。多分あなたはコードから理解するでしょう。

ここにあります。

function validateform(form){ 
event.preventDefault(); 
console.log(form); 
var i; 
var fname = form.name.value; 
var email = form.email.value; 
var message = form.getElementsByClassName("error-message"); 
var atpos = email.indexOf("@"); 
var dotpos = email.lastIndexOf("."); 
if (fname==null || fname==""){  
    for (i = 0; i < message.length;i++) 
    { 
    form.getElementsByClassName("error-message")[i].innerHTML="Please Enter Name"; 
    return false; 
    } 
} 

else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { 
for (i = 0; i < message.length;i++) 
{ 
    form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again."; 
    return false; 
} 
} 

else if (fname!=null || fname!=""){ 
for (i = 0; i < message.length;i++) 
{ 
    form.getElementsByClassName("error-message")[i].style.display = "none"; 
    return false; 
} 
} 

HTMLは

<form name="ccform" method="post" onsubmit="validateform(this)"> 
      <p class="customer-name">Name</p> 
      <input type="text" class="input-name" name="name"></input> 
      <p class="error-message"></p> 
      <p class="customer-name">Email</p> 
      <input type="text" class="input-name" name="email" placeholder="e.g. name@emailaddress.com"></input> 
      <p class="error-email"></p> 
      <button type="submit" class="submit-button">Submit</button> 
    </form> 

私は、エラー・メッセージを非表示にすると、名前が入力されているだけのエラーメールを表示し、電子メールが入力されていないと私は送信ボタンを押してください。

P.S：jQueryを使用しないでください。

Answer 1

else ifの条件でerror_messageクラスを非表示にしようとしています。コードはすべてのif条件を解析しません。あなたのケースでは、電子メール検証メッセージを表示したいので、2番目の条件を入力し、3番目の条件を入力しません。 if-else if-elseステートメントhereの使用方法を参照してください。次のように、2番目と3番目の条件をマージしようとします。

if (fname==null || fname==""){ 
    for (i = 0; i < message.length;i++) 
    { 
     form.getElementsByClassName("error-message")[i].innerHTML="Please Enter Name"; 
     form.getElementsByClassName("error-message")[i].style.display = "block"; 
     return false; 
    } 
} else { 
    form.getElementsByClassName("error-message")[i].style.display = "none"; 
} 

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { 
    for (i = 0; i < message.length;i++) 
    { 
     form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again."; 
     form.getElementsByClassName("error-email")[i].style.display = "block"; 
     return false; 
    } 
} else { 
    form.getElementsByClassName("error-email")[i].style.display = "none"; 
} 

希望します。

Answer 2

これは私のために働いたものです。

function validateform(form){ 
var i; 
var fname = form.name.value; 
var email = form.email.value; 
var message = form.getElementsByClassName("error-message"); 
var atpos = email.indexOf("@"); 
var dotpos = email.lastIndexOf("."); 
if (fname==null || fname==""){  
for (i = 0; i < message.length;i++) 
{ 
    form.getElementsByClassName("error-message")[i].innerHTML="Please enter your name"; 
    form.getElementsByClassName("error-message")[i].style.display = "block"; 
    form.getElementsByClassName("error-email")[i].style.display = "none"; 
    return false; 
} 
} 

if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) { 
for (i = 0; i < message.length;i++) 
{ 
    form.getElementsByClassName("error-email")[i].innerHTML="The email address you've entered contains an incorrect character. Please check this information and try again."; 
    form.getElementsByClassName("error-message")[i].style.display = "none"; 
    form.getElementsByClassName("error-email")[i].style.display = "block"; 
    return false; 
} 
}