JavaScript Form Validation (required)

Question

Hello I am building a website for myself and came across this issue of my form going directly to its success page with empty inputs. How can I fix this? I already scanned through other questions like mine and none have seemed to solve this issue. The form is within HTML tag and the inputs closed '/>'. I think this could be my script affecting it but I don't understand the concept as to how exactly should I go about coding to 'validate' a form. I understand you can do so with JavaScript and JQuery. With that said how do I fix this issue of mine here are the codes snippet.

<div class="contact-form col-md-6 col-sm-6">
                    <form action="#" name="contact" class="needs-validation">
                        <label for="fname">Full Name</label>
                        <input type="text" id="fname" name="firstname" placeholder="Enter your full name..." required />
                        <label for="email">Email</label>
                        <input type="text" id="email" name="email" placeholder="Enter a valid email..." required />
                        <label for="subject">Message</label>
                        <textarea id="subject" name="subject" placeholder="Your requested choice/inquiry..." required></textarea>
                        <a href="success.html" class="button-submit">SEND</a>
                    </form>
</div>

And here is the script I was trying to work on:

// Disable form submissions if there are invalid fields
(function() {
    'use strict';
    window.addEventListener('load', function() {
        // Get the forms we want to add validation styles to
        var forms = document.getElementsByClassName('needs-validation');
        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated');
            }, false);
        });
    }, false);
})();

Your help would be appreciated, thank you.

Answer 1

You code is not right, it shouldn't be like this, a with href will always redirect you to the specified page instead of doing post or get.

Change this code:

 <a href="success.html" class="button-submit">SEND</a>

To this:

 <button class="btn btn-primary" type="submit">SEND</button>

Your HTML should look like this:

<div class="contact-form col-md-6 col-sm-6">
    <form method="post" action="#" name="contact" class="needs-validation">
        <label for="fname">Full Name</label>
        <input class="form-control" type="text" id="fname" name="firstname" placeholder="Enter your full name..." required />
        <label for="email">Email</label>
        <input class="form-control" type="text" id="email" name="email" placeholder="Enter a valid email..." required />
        <label for="subject">Message</label>
        <textarea class="form-control" rows="3" id="subject" name="subject" placeholder="Your requested choice/inquiry..." required></textarea><br>
        <button type="submit"class="btn btn-success">SEND</button>
    </form>
</div>

THERE IS NOTHING WRONG WITH YOUR SCRIPT. You have to learn the html structure properly.

Answer 2

You need to prevent your default right at the start of your onsubmit function. While your checkValidity function is running, the form has probably finished processing and then submitting. Preventing it this high will just stop it from processing all together so you can then check your validation and do what you want depending on the result.

form.addEventListener('submit', function(event) {
   event.preventDefault();
   if(form.checkValidity()){
      form.classList.add('was-validated');
   }
}, false);