0

I'm building a web application as some practice and I've designed the signup process so that you have to type your mail into an input and also confirm it by typing it twice in another input.

I want the verification process to be done as the user starts typing, not after pressing the sign-up button.

Below is the solution I came up with, but it has some issues: it checks if the values match only after finishing typing the #confirmMail input (because that's what I told it to), but if the #confirmMail input is correct and the user fixes only the #mail input without typing anything more in the #confirmMail, the error message still appears.

What is a better solution than the one below?

$("#confirmMail").blur
    (
        function () {
            let mail1 = $("#mail")
            let mail2 = $("#confirmMail")

            if (!(mail1.val() === mail2.val())) {
                document.getElementById("match").style.display=""
                mail1.css({borderColor: "red",
                            borderWidth: "3px",
                            borderStyle:"solid"})
                mail2.css({borderColor: "red",
                    borderWidth: "3px",
                    borderStyle:"solid"})

            }
            else if (mail1.val()=== mail2.val()){
                document.getElementById("match").style.display="none"
                mail1.css({borderWidth : "0px"})
                mail2.css({borderWidth : "0px"})
            }
        }
    )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input id="mail" type="text">
  <input id="confirmMail" type = "text">
  <span id="match"; style = "display: none; color:red" >Emails do not match</span>
                <input id="submitInput" class="input" type="submit" value="SIGN-UP">

</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Leonard V.
  • 115
  • 1
  • 8
  • 1
    Use `$("#mail, #confirmMail").blur()` so it's checked when you edit either of them. – Barmar Jul 02 '21 at 11:22
  • @Barmar yes, that solved it. Thank you! – Leonard V. Jul 02 '21 at 11:25
  • @Barmar, something off-topic now. How can I prevent the user from clicking the signup button if a certain action occurs? E.g. above, if the emails do not match, the user wont be able to click the signup button? – Leonard V. Jul 02 '21 at 11:30
  • 1
    You can set its `disabled` property until the form validates. – Barmar Jul 02 '21 at 11:31
  • 1
    Refer the following link: https://stackoverflow.com/questions/21727317/how-to-check-confirm-password-field-in-form-without-reloading-page/21727518 – sachind Jul 02 '21 at 12:27

0 Answers0