BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] パスワードが一致しても、パスワードの確認で「パスワードが一致しません」と表示されることがある

2022-02-05 22:46:13

質問

そこで、サインアップフォームを作成しているのですが、パスワードと確認用パスワードの両方が一致するように、パスワードの検証を追加しました。このアイデアは、最初にパスワードを入力する際に "パスワードが一致しません" .

これは、パスワードの確認入力でパスワードを再入力していないためです。パスワードを再入力して、それが一致すれば、次のように表示されるはずです。 パスワードが一致しました。 . それでも一致しない場合は、次のようなメッセージが表示されます。 パスワードが一致しません .

私が抱えている問題は、最初にパスワードが一致したときに、メッセージが次のように変化しないことです。 パスワードが一致 のままです。 パスワードが一致しない .

一致させるためには、パスワードの入力に戻って、文字を追加または削除し、確認用パスワードにも同じことをしなければなりません。私のコードをコードスニペットに記載しましたので、私の説明をより良くご理解いただけると思います。

なぜこのようなことが起こるのか、ご存知の方はいらっしゃいますか？ 

  var passConfirm = function() {
         if (document.getElementById("Password").value ==
             document.getElementById("ConfirmPassword").value) {
             document.getElementById("Message").style.color = "Green";
             document.getElementById("Message").innerHTML = "Passwords match!"
        } else {
            document.getElementById("Message").style.color = "Red";
            document.getElementById("Message").innerHTML = "Passwords do NOT match!"
        }
    }

<div class="container">
    <form class="form" onsubmit="validateForm(event)">
       <div>
            <label id="FullNameLabel">Full Name</label></br>
              <input 
                type="text" 
                placeholder="John Doe" 
                id="FullName">
            </input>
        </div>
        <div>
            <label id="EmailLabel">Email</label></br>
             <input 
                type="text" 
                placeholder="[email protected]" 
                id="Email">
            </input>
         </div>
         <div>
            <label id="PhoneNumberLabel">Phone Number</label></br>
             <input 
                type="text" 
                placeholder="(123) 456-7890" 
                id="PhoneNumber">
            </input>
         </div>
         <div>
            <label id="PasswordLabel">Password</label></br>
             <input 
                name="Password"
                id="Password"
                type="password" 
                placeholder="Password"
                onkeyup='passConfirm();'>
            </input>
         </div>
         <div>
            <label id="ConfirmPswdLabel">Confirm Password</label></br>
             <input 
                type="password" 
                placeholder="Confirm Password" 
                id="ConfirmPassword"></input>
         </div>
         <span id="Message"></span>
      
    </form>
      <button type="submit" value="submit">Sign Me Up!</button>
</div>

解決方法は？

問題なのは、あなたがまだ onKeyUp イベントが発生します。追加すると動作します。また <input /> でなく <input></input> . 

var passConfirm = function() {
  if (document.getElementById("Password").value ==
    document.getElementById("ConfirmPassword").value) {
    document.getElementById("Message").style.color = "Green";
    document.getElementById("Message").innerHTML = "Passwords match!"
  } else {
    document.getElementById("Message").style.color = "Red";
    document.getElementById("Message").innerHTML = "Passwords do NOT match!"
  }
}

<div class="container">
  <form class="form" onsubmit="validateForm(event)">
    <div>
      <label id="FullNameLabel">Full Name</label></br>
      <input type="text" placeholder="John Doe" id="FullName" />
    </div>
    <div>
      <label id="EmailLabel">Email</label></br>
      <input type="text" placeholder="[email protected]" id="Email" />
    </div>
    <div>
      <label id="PhoneNumberLabel">Phone Number</label></br>
      <input type="text" placeholder="(123) 456-7890" id="PhoneNumber" />
    </div>
    <div>
      <label id="PasswordLabel">Password</label></br>
      <input name="Password" id="Password" type="password" placeholder="Password" onkeyup='passConfirm();' />
    </div>
    <div>
      <label id="ConfirmPswdLabel">Confirm Password</label></br>
      <input type="password" placeholder="Confirm Password" id="ConfirmPassword" onkeyup='passConfirm();' />
    </div>
    <span id="Message"></span>
  </form>
  <button type="submit" value="submit">Sign Me Up!</button>
</div>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します