JavaScriptのフォーム検証

Question

3つのpages.iを含む単純なWebstieを構築しました。ホームページにフォームを作成しましたが、JavaScriptの問題が発生しました。入力の直後にフィールドを設定する際に問題がありますフィールドには、ユーザーが間違ったことを知らせるメッセージ（プロンプト）が表示されます。 私はhonmePage（ページの本体にあるフォーム-html）の下に入力しています。スクリプトには簡単な機能が含まれています。 私の目的は、ユーザーがフィールド名を入力した後でそれを削除するかどうかをチェックすることです。そのため、このフィールドが必須であることをユーザーに知らせる赤色のメッセージを表示します。 誰かが私を助けることができたら嬉しいです。

function validateName(){ 
 
    var name=document.getElementById("fullName").value; 
 
    if (name.length == null) 
 
    { 
 
    nameRequiredPromt("Name Is Required",fullNamePrompt,"white"); 
 
    return false; 
 
    } 
 
} 
 

 
function nameRequiredPromt(message,promtLocation,color){ 
 
    document.getElementById(promtLocation).innerHTML=message; 
 
    document.getElementById(promtLocation).style.color=color; 
 
}

<form id="form" style="color:white;"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     FullName : 
 
     </td> 
 
     <td> 
 
     <input type="text" placeholder="fullName" id="fullName" 
 
     onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa 
 
     </label> <br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     E-mail : 
 
     </td> 
 
     <td> 
 
     <input type="email" placeholder="email" id="email"/><label 
 
     id="emailPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     New Password : 
 
     </td> 
 
     <td> 
 
     <input type="password" placeholder="password" id="newPassWord"/> <label 
 
      id="PasswordPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Repeat Password : 
 
     </td> 
 
     <td> 
 
     <input type="password" placeholder="repeatedPassword" 
 
     id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 

 
     </td> 
 
     <td> 
 
     <input type="submit" value="submit" id="submit"/> <label 
 
     id="submitPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

私はいくつかのチェックはスクリプトが動作することを確認するために行なったし、私は私の問題は、lable「ID」のdeclerationであると考えるので、それは仕事をしました。

!name.length 

lengthへ

Answer 1

if (name && !name.length) 
{ 
    nameRequiredPromt("Name Is Required","fullNamePrompt","white"); 
    return false; 
} 

第一条件チェック赤0

Answer 2

スイッチ

name.length == null 

がゼロnullではない

になりますまた、fullNamePromptは不定

がnameRequiredPromt("Name Is Required","fullNamePrompt","white");

を試してみてください表示されます

固定：name.length == nullまたfullNamePrompt未定義とcolor：白名が第二name.lengthであるかどうかをチェックするために、nullの場合

function validateName(){ 
 
    var name=document.getElementById("fullName").value; 
 
    if (!name.length) 
 
    { 
 
    nameRequiredPromt("Name Is Required","fullNamePrompt","red"); 
 
    return false; 
 
    } 
 
} 
 

 
function nameRequiredPromt(message,promtLocation,color){ 
 
    document.getElementById(promtLocation).innerHTML=message; 
 
    document.getElementById(promtLocation).style.color=color; 
 
}

<form id="form" style="color:white;"> 
 
    <table> 
 
    <tr> 
 
     <td> 
 
     FullName : 
 
     </td> 
 
     <td> 
 
     <input type="text" placeholder="fullName" id="fullName" 
 
     onkeyup="validateName()" type="text"/> <label id="fullNamePrompt">aaaa 
 
     </label> <br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     E-mail : 
 
     </td> 
 
     <td> 
 
     <input type="email" placeholder="email" id="email"/><label 
 
     id="emailPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     New Password : 
 
     </td> 
 
     <td> 
 
     <input type="password" placeholder="password" id="newPassWord"/> <label 
 
      id="PasswordPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Repeat Password : 
 
     </td> 
 
     <td> 
 
     <input type="password" placeholder="repeatedPassword" 
 
     id="repeatedPassWord"/> <label id="repeatedPassWordPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 

 
     </td> 
 
     <td> 
 
     <input type="submit" value="submit" id="submit" onclick="return validateName();"/> <label 
 
     id="submitPrompt"> </label><br> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>