Warum wird meine JavaScript-Funktion nicht ausgeführt?

Question

Ich versuche, eine Anmeldeseite zu erstellen, die Daten überprüft, bevor sie an meine PHP-Seite gesendet wird, die sie verarbeitet. Ich benutze Javascript zur Validierung. Dies ist mein Code:

<div class = mainInfo> 
    <?php include "header.php"; ?>   
    <form name = SignUpForm action = signUpHandler.php method ='POST' class = inputLists> 
     username: <input type = text name = "userName"> 
     password: <input id= "p1" type = password name = "password"> 
     reenter password: <input id ="p2" type = password name = "passwordConfirmation"> 

     <input type="submit" name =" submitButton" value ="submit"> 
    </form> 
    <div id="feedback"> 
    </div> 
</div> 
<script> 
function validate() 
{ 
    document.getElementById("feedback").innerHTML = "functionbeingcalled"; 
    var p1 = document.getElementById("p1").value, 
       p2 = document.getElementById("p2").value); 
    if(! p1===p2) 
    { 

     document.getElementById("feedback").innerHTML = "passwords dont match"; 
    } 
    if(p1==="") 
    { 
     document.getElementById("feedback").innerHTML = "Must have a password"; 
    } 
} 
window.setInterval(validate(),1000); 
</script> 

<?php include "footer.php"; ?> 

Ich dachte, ich würde, dass dieses Skript jede Sekunde von dem Zeitpunkt ausgeführt werden soll, dass die Seite geladen wird, aber das Skript überhaupt nicht in der Flucht. Diese Zeile:

document.getElementById("feedback").innerHTML = "functionbeingcalled"; 

funktioniert auch nicht.

Abgesehen von dieser Frage ist es möglich, Daten zu validieren, bevor Sie mit nur php einreichen? Ich bin neu in der Webprogrammierung.

Answer 1

Übergeben Sie die Funktion, anstatt sie aufzurufen.

//    no parentheses! 
window.setInterval(validate, 1000); 

Und das ist falsch.

if(! p1===p2) 

sollte es dieses

if(p1!==p2) 

wegen der höheren Priorität des Präfix !

Answer 2

Ich würde vorschlagen, dass Sie die Zuhörer auf Ihre Eingabefelder hinzuzufügen! ;)

1. Es wird dann nur der Validierungscode ausgeführt, wenn Änderungen vorgenommen werden. Mit anderen Worten; nur wenn nötig.
2. Es wird der Validierungscode "sofort" ausgeführt, wenn sich die Eingabe ändert. Anstelle der Validierung alle 1000 ms.

Ich sehe, Sie verwenden jQuery (noch) nicht? Wenn Sie auf ‚Ändern‘ mit Klar js validieren möchten, ist hier eine Lösung: Plain js solution

Wenn Sie mit dem Hinzufügen der jQuery-Bibliothek, um Sie Code in Ordnung sind, dann kann es wie dieses jQuery solution

Answer 3

sehr einfach durchgeführt werden Nun, Sie einige Probleme haben ...

Zuerst mit setInterval() Sie nur einen Verweis auf die Funktion übergeben, die (validate in Ihrem Fall) aufgerufen werden soll, Sie rufen sie nicht wirklich, wie Sie tun (validate()). Dies führt im Wesentlichen validate sofort und legt dann den Rückgabewert als die Funktion, die jede Sekunde aufgerufen wird. Da keinen Wert zurückgibt, passiert nichts danach jede Sekunde.

Sie haben auch einen Tippfehler mit: if(! p1===p2), der angibt, dass das Boolesche Gegenteil von p1 gegen p2 getestet wird. Was Sie wollen, ist: if(p1 !== p2), wie Sie "nicht streng gleich" ausdrücken.

Nun, wirklich gehen Sie über die Validierung der falsche Weg. Statt eine Validierungsfunktion auf einem Timer laufen, was ineffizient ist, würden Sie in einem oder mehreren dieser Fälle überprüfen möchten:

• kurz vor die gesamte Form
vorgelegt
• nur, nachdem der Benutzer Blätter ein Formularfeld
• als der Benutzer ist, Daten
• eine Kombination aller 3

jedes dieser Szenarien eintritt, durch Event-Handler und ein Arbeitsbeispiel für jeweils gehandhabt anzeigen n unten.

// Get the DOM references you'll need just once: 
 
var feedback = document.getElementById("feedback"); 
 

 
// Don't set variables equal to property values of DOM elements because 
 
// if you decide you need a different property value, you have to re-scan 
 
// the DOM for the same element all over again. 
 
var p1 = document.getElementById("p1") 
 
var p2 = document.getElementById("p2"); 
 

 
var form = document.querySelector("form"); 
 

 
// Use this to validate when submit is pressed (causing form to be submitted): 
 
form.addEventListener("submit", function(evt){ 
 
    // If validate function returns false, don't submit 
 
    if(!validate()){ 
 
    evt.preventDefault(); // cancel the form submission 
 
    feedback.textContent = "Can't submit. Form is not valid!"; 
 
    } 
 
}); 
 

 
// Get the elements that need to be validated: 
 
var inputs = document.querySelectorAll("input[type=text],input[type=password]"); 
 

 
// Convert that node list into an array: 
 
inputs = Array.prototype.slice.call(inputs); 
 

 
// Loop over array and set up event handlers for inputs 
 
inputs.forEach(function(input){ 
 
    input.addEventListener("blur", validate); // Used to validate when user moves off of each element 
 
    input.addEventListener("input", validate); // Used to validate as data is being entered 
 
}); 
 

 

 
function validate() { 
 
    // Keep track of whether the form is valid or not. Assume that it is by default 
 
    var valid = true; 
 

 
    // .innerHTML is for when you want to assign a string containing 
 
    // HTML to a DOM element. This invokes the HTML parser and renders 
 
    // the HTML. If you don't have HTML in the string, use .textContent 
 
    // instead, which doesn't invoke the HTML parser and is more efficient 
 
    
 
    // See if the password was typed in both boxes before telling the user 
 
    // that the passwords don't match 
 
    if(p1.value && p2.value){ 
 
    // Are they the same? 
 
    if(p1.value !== p2.value){ 
 
     feedback.textContent = "passwords dont match"; 
 
     valid = false; 
 
    } else { 
 
     feedback.textContent = "passwords match"; 
 
    } 
 
    } else { 
 
    // If both password fields aren't filled in, the form can't be valid 
 
    valid = false; 
 
    } 
 
    
 
    if(p1.value === "") { 
 
    feedback.textContent = "Must have a password"; 
 
    valid = false; 
 
    } 
 
    
 
    // Send a result to the caller so it can be known by other code if the form is valid 
 
    return valid; 
 
}

<div class = "mainInfo"> 
 
    <form name="SignUpForm" action="signUpHandler.php" method='POST' class="inputLists"> 
 
    <div>username: <input type="text" name="userName"></div> 
 
    <div>password: <input id="p1" type="password" name="password"></div> 
 
    <div>reenter password: <input id="p2" type="password" name="passwordConfirmation"></div> 
 

 
    <!-- Any form element that has a "name" attribute will submit its name/value as 
 
     part of the form data when the form gets submitted. You probably don't want 
 
     the actual submit button to be included in this, so don't give the button 
 
     a "name" attribute. --> 
 
    <input type="submit" value="submit">  <input type="reset" value="reset"> 
 
    </form> 
 
    <div id="feedback"></div> 
 
</div>