Partielle Validierung ausgeführt

Question

Ich versuche, einige Validierungen in einer Form zu tun, und es ist nicht an der Marke. Ich muss die Fehlermeldung des Namens verstecken und nur E-Mail-Fehler anzeigen. Aber es passiert nicht. Vielleicht werden Sie den Code verstehen.

Hier ist es.

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> 

Ich möchte Fehlermeldung und zeigen verstecken nur fehler E-Mail, wenn der Name eingegeben wird, wird E-Mail nicht eingegeben und i drücken Absenden-Button.

S.S. Bitte keine jQuery.

Answer 1

Sie haben versucht, error_message Klasse in einem else if Zustand zu verstecken. Der Code analysiert nicht alle if Bedingungen. In Ihrem Fall möchten Sie die E-Mail-Überprüfungsmeldung anzeigen und daher wird die zweite Bedingung eingegeben und die dritte Bedingung nicht eingegeben. Verweisen Sie auf die Verwendung von if-else if-else Anweisung here. Sie versuchen nur, die zweite und dritte Bedingung wie folgt zusammenzuführen.

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"; 
} 

Ich hoffe, es hilft.

Answer 2

Das hat bei mir funktioniert.

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; 
} 
}