なぜ私のJavaScript関数が実行されていませんか？

Question

私はそれを処理する私のPHPページに提出される前にデータを検証するログインページを作成しようとしています。私は検証するためにjavascriptを使用しています。これは私のコードです：

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

私はページが読み込まれることを、このスクリプトは、時間の毎秒を実行する必要があると思っただろうが、スクリプトがまったく実行されていません。この行：

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

も機能しません。

この質問以外にも、PHPのみを使用して送信する前にデータを検証できますか？私はウェブプログラミングに新しいです。

Answer 1

関数を呼び出す代わりに渡します。

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

これは間違っています。

if(! p1===p2) 

それは私はあなたがあなたの入力フィールドにリスナーを追加することを示唆しているため、接頭辞!

Answer 2

の高い優先順位のこの

if(p1!==p2) 

する必要があります！ ;）

1. 変更が行われると、検証コードが実行されます。言い換えると;必要なときにのみ。
2. 入力が変更された場合、検証コードは「すぐに」実行されます。 1000ミリ秒ごとの検証の代わりに。

あなたはjQuery（まだ）を使用していないのですか？あなたはプレーンなJSを使用して「変更」に検証したい場合は、ここソリューションです：Plain js solution

あなたはあなたのコードにjQueryライブラリを追加すると大丈夫であれば、それはこのjQuery solution

Answer 3

のような非常に簡単に行うことができますさて、あなたはsetInterval()で、

まず...いくつかの問題を持って、あなただけの、あなたが実際にあなたのようにそれを起動していない、（あなたのケースでvalidate）と呼ばれる関数への参照を渡しますやっている（validate()）。これは本質的にvalidateを実行してから、その戻り値を毎秒呼び出される関数として設定します。 validate()は値を返さないため、その後は何も起こりません。

また、p1のブール代数がp2に対してテストされていることを示すif(! p1===p2)のタイプミスがあります。あなたが望むのは：if(p1 !== p2)です。これは「厳密には等しくない」表現方法です。

実際、あなたは間違った方法で検証を行っています。は、代わりに非効率的であるタイマー、上の検証機能を実行するのには、これらのケースのうちの1つまたは複数に検証したいと思います：

フォーム全体が

だけで、ユーザーの葉の後に提出される直前に

• フォームフィールド
• ユーザがデータ
• にすべての3

のいくつかの組み合わせを入力されるように、これらのシナリオの各々は、イベントハンドラによって処理され、それぞれの実施例を示しています以下のn。あなたのコードをフォーマット

// 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>