Html Question posted in
Some basic documentation can be found here.

Trouble getting my JS function to validate my HTML form

I’ve been having so much trouble getting my JavaScript to check that the emails in my HTML form match and display results. I’ve tried doing it like the zyBook for my class shows, but I just get nothing.

I tried to have the function compare the input of #email and #cemail and change the background color of the field to green when they matched and to red when they didn’t match. I tried to create an event listener to run the function whenever the input for #cemail changed. I’m using Visual Studio, and one of the main problems that I notice is that when I add ".value" or ".style" or anything like it, they don’t get suggested as a method of the objects in the function. It seems like I’m referencing something that doesn’t exist, but the IDs match, so I don’t know why it doesn’t register.

Here is the relevant code:

<form id="userInfo">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" placeholder="John"><br>
    <label for="lname">Last Name:</label>,
    <input type="text" id="lname" name="lname" placeholder="Doe"><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" placeholder="abc123@gmail
.com"><br>
    <label for="cemail">Confrim Email:</label>
    <input type="text" id="cemail" name="cemail"
placeholder="[email protected]"><br>
    <label for="question">Write Question:</label>
    <textarea id="question" name="question" size="50"
    placeholder="My question is..."></textarea><br>
    <input type="submit" value="Submit">
</form>
<script>
    let cemail = document.querySelector("#cemail").value;
    let formWidget = cemail.addEventListener("change", checkEmail)


    function checkEmail(){
        let email = document.querySelector("#email").value;

        if (email.trim() === cemail.trim()) {
            email.style.backgroundColor = "green";
            cEmail.style.backgroundColor = "green";
            return true;
        } else {
            email.style.backgroundColor = "red";
            cEmail.style.backgroundColor = "red";        }

    }
</script>
Tags:

3

Answers


  1. 0

    Due to my low reputation, I can’t comment and ask follow up questions, but I have some things to say that might help.

    Log the cemail variable and see if it is null. VS Code should be giving you values for the elements, so if it isn’t, maybe cemail null.

    Instead of document.querySelector(), try document.getElementById(). Sometimes you need to run a different function that does almost the same thing.

    I highly bet you know querySelector more then I do, but here is the Mozilla link for querySelector in case there is something we both have overlooked.

    Hope this helps.

    Login or Signup to reply.
  2. 0

    the querySelector returns

    Element object representing the first element in the document that matches the specified set of CSS selectors, or null is returned if there are no matches.

    meaning you get all sorts of attributes and methods to interact with the feild

    You had to keep an reference to the Element and access its value each time you wanted to compare with something. and using the same reference, you’ll be able to update its attributs (like bg color)

    once you remove the .value VS Code should help you with intellisense

    here’s the working code :

        let cemail = document.querySelector("#cemail");
    let formWidget = cemail.addEventListener("change", checkEmail)
    
    
    function checkEmail(){
        let email = document.querySelector("#email");
    
        if (email.value.trim() === cemail.value.trim()) {
            email.style.backgroundColor = "green";
            cemail.style.backgroundColor = "green";
            return true;
        } else {
            email.style.backgroundColor = "red";
            cemail.style.backgroundColor = "red";        }
    
    }
    Login or Signup to reply.
  3. 0

    I think it is better to use e.target.value for the confirmation email input like this you can instantly show to user if it is matching or not while typing.

    let confEmail = document.querySelector("#cemail")
let enteredEmail = document.querySelector("#email");


function checkEmail(e){
    let email = document.querySelector("#email").value;
    const value = e.target.value
    if (email.trim() === value.trim()) {
        enteredEmail.style.backgroundColor = "green";
        confEmail.style.backgroundColor = "green";
    
    } else {
        enteredEmail.style.backgroundColor = "red";
        confEmail.style.backgroundColor = "red";        
    }
}

confEmail.addEventListener("input",checkEmail)
        <form id="userInfo">
        <label for="fname">First Name:</label>
        <input type="text" id="fname" name="fname" placeholder="John"><br>
        <label for="lname">Last Name:</label>,
        <input type="text" id="lname" name="lname" placeholder="Doe"><br>
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" placeholder="abc123@gmail
    .com"><br>
        <label for="cemail">Confrim Email:</label>
        <input type="text" id="cemail" name="cemail"
    placeholder="[email protected]"><br>
        <label for="question">Write Question:</label>
        <textarea id="question" name="question" size="50"
        placeholder="My question is..."></textarea><br>
        <input type="submit" value="Submit">
    </form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search