Validierung aller Formularfelder - Funktion funktioniert nicht richtig

Ich habe ein HTML-Formular und eine Funktion validateForm() erstellt, um die Formularfelder zu validieren. Die Funktion meldet jedoch nur Probleme mit einer falschen E-Mail-Eingabe und validiert nicht die anderen Felder im Formular. Können Sie meinen Code überprüfen, um festzustellen, ob ich Fehler habe?Validierung aller Formularfelder - Funktion funktioniert nicht richtig

Dank

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Support Center</title> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="styles/layout.css" type="text/css"> 
<link rel="stylesheet" href="styles/Form.css" type="text/css"> 
<script type="text/javascript" src="Form.js"></script> 
</head> 
<body> 
<div class="wrapper row1"> 
    <header id="header" class="clear"> 
    <div id="hgroup"> 
     <h1><a href="index.html">Support Center</a></h1> 
     <h2>Welcome to our website</h2> 
    </div> 
    <nav> 
     <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="#">Our Staff</a></li> 
     <li><a href="#">Location</a></li> 
     <li><a href="Form.html">Help</a></li> 
     <li class="last"><a href="#"></a></li> 
     </ul> 
    </nav> 
    </header> 
</div> 
</body> 
<!-- content --> 
<body> 
     <h1>Help is here!</h1> 
    <form> 
     <h1>Should you need assistance, please do not hesitate to contact us:</h1> 

    <div class="contentform"> 
     <div id="sendmessage"> Your form has been sent successfully. Thank you. </div> 

     <div class="leftcontact"> 
        <div class="form-group"> 
        <p>Surname<span>*</span></p> 
        <span class="icon-case"><i class="fa fa-male"></i></span> 
         <input type="text" name="lastName" id="lastName"/> 
       <div class="validation"></div> 
     </div> 

      <div class="form-group"> 
      <p>First Name <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-user"></i></span> 
       <input type="text" name="firstName" id="firstName"/> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>E-mail <span>*</span></p>  
      <span class="icon-case"><i class="fa fa-envelope-o"></i></span> 
       <input type="email" name="emailAddress" id="emailAddress"/> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>Office <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-location-arrow"></i></span> 
       <input type="text" name="office" id="office"/> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>Desk <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-map-marker"></i></span> 
       <input type="text" name="deskNumber" id="deskNumber"/> 
       <div class="validation"></div> 
      </div> 



    </div> 

    <div class="rightcontact"> 
      <div class="form-group"> 
      <p>Phone number <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-phone"></i></span> 
       <input type="text" name="mobilePhone" id="mobilePhone"/> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>Job Number <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-building-o"></i></span> 
       <input type="text" name="jobNumber" id="jobNumber"/> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>Computer <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-info"></i></span> 
       <input type="text" name="computerNumber" id="computerNumber"/> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>Problem <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-comment-o"></i></span> 
       <select name="Problem"> 
        <option value="New User">New User</option> 
        <option value="Delete User">Delete User</option> 
        <option value="Lost File">Lost File</option> 
        <option value="New Software Installation">New Software Installation</option> 
        <option value="Virus Checking">Virus Checking</option> 
       </select> 
       <div class="validation"></div> 
      </div> 

      <div class="form-group"> 
      <p>A little about your problem <span>*</span></p> 
      <span class="icon-case"><i class="fa fa-comments-o"></i></span> 
       <textarea name="message" rows="14"></textarea> 
       <div class="validation"></div> 
      </div> 
    </div> 
    </div> 
<button type="submit" class="bouton-contact">Send</button> 

</form> 


</body> 
</html> 

</body> 
</html>

-Code

function validateForm() { 
    var letters = "[A-Za-z]+$"; 
    var numbers = "^[0-9]+$"; 
    var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; 


    var jobNumber = document.getElementById("jobNumber").value; 
    var firstName = document.getElementById("firstName").value; 
    var lastName = document.getElementById("lastName").value; 
    var mobilePhone = document.getElementById("mobilePhone").value; 
    var emailAddress = document.getElementById("emailAddress").value; 
    var officeNumber = document.getElementById("office").value; 
    var deskNumber = document.getElementById("deskNumber").value; 
    var computerNumber = document.getElementById("computerNumber").value; 


    if(jobNumber != "" && firstName != "" && lastName != "" && mobilePhone != "" && emailAddress != "" && officeNumber != "" && deskNumber != "" && computerNumber != "") { 

    if(jobNumber.length == 5 && jobNumber.match(numbers)) { 

     if(firstName.match(letters) && lastName.match(letters)) { 

     if(mobilePhone.length == 10 && mobilePhone.match(numbers)) { 

      if(emailAddress.match(emailReg)) { 
      alert("Form submitted!"); 
      return true; 
      } 
      else { 
      alert("Please enter a valid email"); 
      return false; 
      } 

     } 
     else { 
      alert("Please enter a valid mobile number"); 
      return false; 
     } 

     } 
     else { 
     alert("Please enter a valid first name and last name"); 
     return false; 
     } 

    } 
    else { 
     alert("Please enter a valid job number"); 
     return false; 
    } 

    } 
    else { 
    alert("Please enter in all fields"); 
    return false; 
    } 

}

Quelle

2016-09-10 Nitro0003

Edit: Ich Sie verwenden eine Klasse contentform nur bemerkt, und ich dachte, es ein id war. Ich würde auch eine ID zu Ihrem Formular hinzufügen, um in der Lage zu sein, alle Formulardaten mit einer DOM-Traversal statt mehrerer zu erhalten. Der einzige Grund, warum die E-Mail funktioniert, ist, dass der Browser die E-Mail ohne JS validiert.

Zuerst würde ich alle Variablen dekrementieren und sie durch das Formularobjekt ersetzen.

var formObject = document.getElementById('contentform');

Dann könnten Sie auch immer untergeordneten Elemente überprüfen, die erforderlich sind. Ich würde auch die Verschachtelung Ihrer if-Anweisungen entfernen und anstatt einen Fehler zu melden und false zurückzugeben, fügen Sie den Fehler zu einem Array hinzu, um jeden zu speichern, und kehren Sie dann zurück, nachdem alle Elemente validiert wurden.

var errorList = []; 
var isValid = true; 
if(formObject.jobNumber == "") { 
    errorList.push('Please enter a valid job number'); 
    isValid = false; 
}

Dann spülen und für jedes benötigte Element wiederholen. Danach geben Sie einfach die Liste und den Status (isValid) zurück.

// this should be on its own at the bottom of your function right before you return 
if (!isValid) { 
    alert(errorList); 
    // I would add some formatting or preferably display in the form view. 
} 

return isValid; 


html file 
// add the event handler here 
<button type="submit" onclick="validateForm()" class="bouton-contact">Send</button>

Auch diese

if (!isValid) { 
    alert(errorList); 
}

sollte am unteren Rand von jeder if-Anweisung und platziert entfernt werden, nachdem alle geprüft worden sind.

Quelle

2016-09-10 02:14:32

ich meine Form geändert haben, so dass die ID contentform ist außerdem hat. Allerdings glaube ich nicht, dass ich Ihre Java-Änderung richtig interpretiert habe. http://hastebin.com/evamuhonoj.coffee Sorry, coudn't ich herausfinden, wie es als Code, um es zu bekommen :( – Nitro0003

keine Sorgen. Wo Sie die validateForm Funktion aufrufen? Wenn Sie nicht sind Wenn Sie es irgendwo aufrufen, müssen Sie einen Event-Handler auf dem Formular erstellen, wenn es gesendet wird. Ich bearbeite meine Antwort, um zu illustrieren, wovon ich rede. –

Liebe deinen Arbeitsmann, nachdem ich ein bisschen mehr selbst gespielt habe Danke eine Tonne: D – Nitro0003

Hier bestätigen Sie Ihre E-Mail-Adresse: Übergeben Sie zuerst die ID an Javascript per Post-Methode, dann funktioniert die Funktion validation().

//html 
<div> 
<input type="text" name="email" id="email" class="" data-wow-delay=".5s" value="" placeholder="Email..." /> 
</div> 
<span id="emailerror" style="display:none; color:#F00">Enter valid email id*</span> 
<input type="submit" onClick="return validation();" class="wow fadeInUp" value="Send" /> 

//javascript 

function validation() 
{ 
    var email = document.getElementById('email').value; 
    if(email == '' || !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))) 
     { 
     document.getElementById('emailerror').style.display = 'inline'; 
     var error=1; 
     } 
     else 
     { 
     document.getElementById('emailerror').style.display = 'none'; 
     } 

    if(error == 1) 
     { 
     return false; 
     } 
     else 
     { 
     return true;  
     } 
    }

jetzt Ihre E-Mail-Validierung funktioniert gut, dank

Quelle

2016-09-10 05:15:41 rubin

Validierung aller Formularfelder - Funktion funktioniert nicht richtig

Antwort

Verwandte Themen