CODEWITHSUNDEEP
javascripthtml
Amina
Amina

Reputation: 13

Displaying an error in certain way

     <!DOCTYPE html>
        <html>
          <body>
            <div class="needContent">
              <label for="Password">Password</label>
              <span class="red-star">&lowast;</span>
              <input type="password" name="Password" id="Password" required="required" onkeyup="starShow()" pattern="^(?=.*\[a-z\])(?=.*\[A-Z\])(?=.*\d)\[a-zA-Z\d\]{8,}$" onchange="check()">
            </div>
            <div class="needContent">
              <label for="Retype_Password">Retype Password</label>
              <span class="red-star">&lowast;</span>
              <input type="password" name="Retype_Password" id="Retype_Password" pattern="^(?=.*\[a-z\])(?=.*\[A-Z\])(?=.*\d)\[a-zA-Z\d\]{8,}$" required="required" onkeyup="starShow()" onchange="check()">
              <p id="status"></p>

<div id="phoneNumber" class="needContent">
                    <label for="Phone_Number" >Phone Number</label>
                    <span class="red-star">&lowast;</span>
                    <input type="tel" name="Phone_Number" id="Phone_Number" 
                    required="required" onchange="Error()" placeholder="999-999-9999" 
                    onkeyup="starShow()" >
                    <p id="showEorror"></p>
                </div>
            </div>


            <script>
    function Error() {
        var phn = document.getElementById("Phone_Number").value;
        if(phn[3]!="-" && phn[7] != "-" ) {
            document.getElementById("showEorror").innerHTML="<span>X</span> The area code of phone number 999-999-9999 can't be all zeros.";
        }else if(phn[0] == 0 || phn[1] == 0 && phn[2] == 0){
            document.getElementById("showEorror").innerHTML="<span>X</span> The area code of phone number 999-999-9999 can't be all zeros.";
        } else {
            document.getElementById("showEorrr").style.display = "none";
        }
    }
              function check() {
                var pass1 = document.getElementById("Password").value;
                var pass2 = document.getElementById("Retype_Password").value;

                if (pass1 != "" && pass2 != "") {
                  if (pass1 != pass2) {
                    document.getElementById("status").innerHTML = "<span>X</span> Doesn't Match.";
                  }
                }
              }
            </script>
          </body>
        </html>

enter image description here So I am working on my school project and I am trying to display the error "Doesn't Match" same as the one for the phone but I don't know what I am doing wrong. I have attached a screen shot of my output.

Upvotes: 1

Views: 29

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370729

You're not resetting the #status text after the password gets properly entered. Try this instead:

if (pass1 != "" && pass2 != "") {
  if (pass1 != pass2) {
    document.getElementById("status").innerHTML = "<span>X</span> Doesn't Match.";
  } else document.getElementById("status").textContent = 'ok';
}

For the phone section, you have a typo or two: "showEorror" vs "showEorrr", which means that, again, the error text does not go away. I recommend using showError or showPhoneError instead.

Upvotes: 1

Related Questions