Einfache Javascript Eingabeformular mit dynamisch ersetzt Pflichtfeld Nachricht DOM

Okay, so meinen Code so ziemlich funktioniert ... es sei denn, Sie ein zweites Mal einreichen klicken und es ist immer noch ein Feld leer, die beigefügten * erforderlich in der Label-Tags vor den Eingabe-Tags werden dupliziert. Das ist schlecht! Ich bin in der Lage, den nodeValue nach Funktion (x) zu alarmieren, aber irgendwie gibt es ein Problem mit der Warnung irgendwo anders ... das ist auch der Grund, warum ich nicht die einfache if-Anweisung verwenden kann, die ich unten auskommentiert habe meines Codes.Einfache Javascript Eingabeformular mit dynamisch ersetzt Pflichtfeld Nachricht DOM

Alle Überarbeitungen zu meinem Code oder Vorschläge werden sehr geschätzt. Alternativ würde ich gerne einige Links folgen. Hoffentlich eines Tages kann ich programmatisch genug denken, um auf SO zurück zu geben ...

Vielen Dank im Voraus. Hier ist mein Code:

Javascript:

var obj = { 


form : document.getElementsByTagName('input'), 
btn : document.getElementById('submit'), 

init : function(){ 

obj.btn.form.onsubmit = obj.handleEvent; 

}, 

handleEvent : function(){ 

for (var i=0; i<obj.form.length; i++){ 

    if (obj.form[i].value===''){ 

    switch(obj.form[i].name){ 
     case 'fname' : 
     case 'lname' : 
     case 'phone' : 
     case 'email' : match=true; obj.error(obj.form[i]); break; 
     } 
    } 
} 
return false; 
}, 


error : function(x) { 
    var req = document.createTextNode(' * required'); 
    var span = x.previousSibling.appendChild(document.createElement('span')); 
    span.className = 'error'; 
//  if (x.previousSibling.firstChild.nextSibling.firstChild.nodeValue !== ' * required'){ 
     span.appendChild(req); 
    //  } 

    //  alert(x.previousSibling.firstChild.nextSibling.firstChild.nodeValue); 
    } 
}

und die HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<link type="text/css" href="css/main.css" rel="stylesheet" /> 

<head> 
    <title>JavaScript Input form</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
    <form method="post" action=""> 
     <div> 
      <ul> 
       <li><label>First Name</label><input type="text" name="fname" size="30" /></li> 
       <li><label>Last Name</label><input type="text" name="lname" size="30" /></li> 
       <li><label>Phone</label><input type="text" name="phone" size="30" /></li> 
       <li><label>Email</label><input type="text" name="email" size="30" /></li> 
       <li><input type="submit" name="submit" id="submit" value="Submit" /> 
      </ul> 
     </div> 
     </form> 
<script type="text/javascript" src="input.js"></script> 
<script type="text/javascript">obj.init();</script> 
</body> 
</html>

Nochmals vielen Dank für das Lesen!

Quelle

2012-04-02 AlecPerkey

Lassen Sie einfach Ihren Bereich leer, bevor Sie Ihre Eingabefelder validieren.

Quelle

2012-04-02 18:25:47 Har

Vielen Dank, mein Herr! – AlecPerkey

mein Vergnügen zu helfen! – Har

Einfache Javascript Eingabeformular mit dynamisch ersetzt Pflichtfeld Nachricht DOM

Antwort

Verwandte Themen