My alert does not pop up when I click submit. What am i doing wrong?-CodePudding

I want my alert to pop up when the form does not validate. It should pop up an alert message when it is valid but does not. I am at a loss. I have been working on fixing this for 4 hours now with no success. I appreciate your time to look at it. I must be doing something wrong. No matter what i do it wont create a pop up alert even though the form is invalid when i press submit.

This is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../normalize.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
<script src="../play2learn/contact-us.js"></script>
<title>Contact Us</title>
</head>
<body>
    <header>
        <section>
            <h1>Play2Learn Logo</h1>
            <nav>
                <ul id="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact-us.html">Contact Us</a></li>
                    <li ><a>Games</a>
                        <ul >
                            <li><a href="anagram-hunt.html">Anagram Hunt</a></li>
                            <li><a href="math-facts.html">Math Facts</a></li>
                        </ul>
                    </li>
                    <li><a href="login.html">Login</a></li>
                </ul>
            </nav>
        </section>
    <hr>
    <main>
        <h1>Contact Us</h1>
        <form id="contact-form" method="post" novalidate>
            <div>
            <label for="emailfield">Email:</label>
            <input type="email" name="emailfield" id="emailfield" required>
            </div>
            <div>
            <label for="subjectfield">Subject:</label>
            <input type="subject" name="subjectfield" id="subjectfield" required>
            </div>
            <div>
            <label for="messagefield">Message:</label>
            <input type="message" name="messagefield" id="messagefield" required minlength="5" maxlength="65">
            </div>
            <div>
            <button>Submit</button>
            </div>
        </form>
    </main>
</body>
<hr>
<footer>&copy; 2022 Play2Learn</footer>
    <address>
        <a href="contact-us.html">
        <img src="images/email.png" alt="email-icon"></a>
        <a href="https://instagram.com">
        <img src="images/instagram.png" alt="instagram-icon"></a>
        <a href="https://twitter.com">
        <img src="images/twitter-icon.png" alt="twitter-icon"></a>
        <a href="https://facebook.com">
        <img src="images/facebook-icon.png" alt="facebook-icon"></a>
    </address>
</section>
</html>

This is my javaScript:
function checkField(field) {
    if (!field.checkValidity()) {
        field.style.backgroundColor = 'pink';
    } else {
        field.style.backgroundColor = '';
    }   
}
window.addEventListener('load', function(e) {
    const form = document.getElementById('contact-form');
    const emailField = form.emailfield;
    const subjectField = form.subjectfield;
    const message = form.messagefield;

    emailField.addEventListener('input', function(e) {
    checkField(emailField);
    });
    subjectField.addEventListener('input', function(e) {
    checkField(subjectField);
    });
    messageField.addEventListener('input', function(e){
    checkField(messageField)
    });
    form.addEventListener('Submit', function(e){
    checkField(emailField);
    checkField(subjectField);
    checkField(messageField);
    
    if(!form.checkValidity()) {
        e.preventDefault();
        alert('Please fix form errors.');
    } else {
        alert('Form Submitted');
     }
   });   
});

CodePudding user response：

Some issues with your code.

If you find yourself writing the same code over and over again, such as with checkField, it usually means you could be using a loop.
On submit, you usually want to e.preventDefault() always - not just when the data is not valid. You can use form.reset() to reset all the inputs back to nothing.
You only need to pass e into the callback of 'addEventListener' when you plan on using it. Otherwise, it just lingers there. In TypeScript, this would throw a compiler error.

Working solution:

const form = document.querySelector('#contact-form');
const fields = form.querySelectorAll('input[name]');

const checkFields = () => {
    fields.forEach((field) => {
        if (!field.checkValidity()) {
            field.style.backgroundColor = 'pink';
            return;
        }
        field.style.backgroundColor = '';
    });
}

window.addEventListener('load', () => {
    checkFields();
    form.addEventListener('input', checkFields);

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        if (!form.checkValidity()) return alert('Form invalid. Please fix errors.');

        alert('Form submitted successfully!');
        form.reset();
    });
});

<h1>Contact Us</h1>
<form id="contact-form" method="post" novalidate>
    <div>
        <label for="emailfield">Email:</label>
        <input type="email" name="email" id="email-field" required />
    </div>
    <div>
        <label for="subjectfield">Subject:</label>
        <input type="subject" name="subject" id="subject-field" required />
    </div>
    <div>
        <label for="messagefield">Message:</label>
        <input type="message" name="message" id="message-field" required minlength="5" maxlength="65" />
    </div>
    <div>
        <button>Submit</button>
    </div>
</form>

CodePudding user response：

There are a number of issues with your code. The first one to address though, per your question is the fact that you are listening for a 'Submit' event instead of a 'submit' event.

Along with that there is a typo. It seems like const message = form.messagefield; should be const messageField = form.messagefield;(variable name change).

After all of that, your html is malformed. I have fixed all of those in the code below.

function checkField(field) {
    if (!field.checkValidity()) {
        field.style.backgroundColor = 'pink';
    } else {
        field.style.backgroundColor = '';
    }   
}
window.addEventListener('load', function(e) {
    const form = document.getElementById('contact-form');
    const emailField = form.emailfield;
    const subjectField = form.subjectfield;
    const messageField = form.messagefield;

    emailField.addEventListener('input', function(e) {
    checkField(emailField);
    });
    subjectField.addEventListener('input', function(e) {
  checkField(subjectField);
    });
    messageField.addEventListener('input', function(e){
    checkField(messageField)
    });
    form.addEventListener('submit', function(e){
    checkField(emailField);
    checkField(subjectField);
    checkField(messageField);
    
    if(!form.checkValidity()) {
        e.preventDefault();
        alert('Please fix form errors.');
    } else {
        alert('Form Submitted');
     }
   });   
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../normalize.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
<script src="../play2learn/contact-us.js"></script>
<title>Contact Us</title>
</head>
<body>
    <header>
        <section>
            <h1>Play2Learn Logo</h1>
            <nav>
                <ul id="nav">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact-us.html">Contact Us</a></li>
                    <li ><a>Games</a>
                        <ul >
                            <li><a href="anagram-hunt.html">Anagram Hunt</a></li>
                            <li><a href="math-facts.html">Math Facts</a></li>
                        </ul>
                    </li>
                    <li><a href="login.html">Login</a></li>
                </ul>
            </nav>
        </section>
    </header>
    
    <hr>
    
    <main>
        <h1>Contact Us</h1>
        <form id="contact-form" method="post" novalidate>
            <div>
            <label for="emailfield">Email:</label>
            <input type="email" name="emailfield" id="emailfield" required>
            </div>
            <div>
            <label for="subjectfield">Subject:</label>
            <input type="subject" name="subjectfield" id="subjectfield" required>
            </div>
            <div>
            <label for="messagefield">Message:</label>
            <input type="message" name="messagefield" id="messagefield" required minlength="5" maxlength="65">
            </div>
            <div>
            <button type="submit">Submit</button>
            </div>
        </form>
    </main>
<hr>
<footer>&copy; 2022 Play2Learn</footer>
    <address>
        <a href="contact-us.html">
        <img src="images/email.png" alt="email-icon"></a>
        <a href="https://instagram.com">
        <img src="images/instagram.png" alt="instagram-icon"></a>
        <a href="https://twitter.com">
        <img src="images/twitter-icon.png" alt="twitter-icon"></a>
        <a href="https://facebook.com">
        <img src="images/facebook-icon.png" alt="facebook-icon"></a>
    </address>
</body>
</html>