Guide on redirecting a webpage post form validation in JavaScript

Question

Guide on redirecting a webpage post form validation in JavaScript

I have a question about my JavaScript code. Even if validation fails, the contact us page still appears. How can I fix this issue? Appreciate any help. Thank you!

(function () {
    window.addEventListener('load', function () {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function (form) {
    form.addEventListener('submit', function (event) {
    if (form.checkValidity() === false) {
    form.classList.add('was-validated');
    event.preventDefault();
    event.stopPropagation();
    }
                                                                    
    form.classList.add('was-validated');
    window.location.href = "contact.html";
    
    
    
    }, false);
                                                                    
    });
    }, false);
    })();

javascript

Answer 1

Answer №1

When reviewing your code, I noticed that you are checking the form validation result, which is good practice. However, at the end of the code, you are still redirecting the user. To address this issue, consider adding a `return;` statement in your code after validation fails or placing the redirection within an else block.

(function () {
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
form.classList.add('was-validated');
event.preventDefault();
event.stopPropagation();
return;
}
                                                                
form.classList.add('was-validated');
window.location.href = "contact.html";


}, false);
                                                                
});
}, false);
})();

Alternatively:

(function () {
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
form.classList.add('was-validated');
event.preventDefault();
event.stopPropagation();
} else {
form.classList.add('was-validated');
window.location.href = "contact.html";
}


}, false);
                                                                
});
}, false);
})();

Answer 2

When reviewing your code, I noticed that you are checking the form validation result, which is good practice. However, at the end of the code, you are still redirecting the user. To address this issue, consider adding a `return;` statement in your code after validation fails or placing the redirection within an else block.

(function () {
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
form.classList.add('was-validated');
event.preventDefault();
event.stopPropagation();
return;
}
                                                                
form.classList.add('was-validated');
window.location.href = "contact.html";


}, false);
                                                                
});
}, false);
})();

Alternatively:

(function () {
window.addEventListener('load', function () {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
form.classList.add('was-validated');
event.preventDefault();
event.stopPropagation();
} else {
form.classList.add('was-validated');
window.location.href = "contact.html";
}


}, false);
                                                                
});
}, false);
})();

Guide on redirecting a webpage post form validation in JavaScript

Answer №1

Similar questions

I'm having trouble seeing my remarks in the comment section

How can you determine if multiple checkboxes have been checked with "if" statements following a button click?

How can scripts be used to enable fullscreen in PhoneGap?

How to eliminate undefined values from a dropdown selection in AngularJS

Finding the perfect spot to CAPTURE an ERROR triggered during an EVAL operation

Approval still pending, awaiting response

The issue arises when d3.scaleLinear returns NaN upon the second invocation

Executing a REST call only when the previous one has successfully completed

What is the best way to create a navigation bar that opens on the same page when clicked?

Creating a custom decision tree in Angular/JS/TypeScript: A step-by-step guide

Switching Over to Burger Menu

Transforming a redux form onSubmit function into a promise-based structure

Ways to identify if the text entered in a text area is right-to-left justified

Delete the designated column from the table

Sending a document to a distant server using a background script in Thunderbird

JSON Array Position Sequence

Explaining the implementation of JQuery's onload event and its impact on reducing dependencies

Adding variables and appending using jQuery

Unable to provide feedback on the input elements

differences in opinion between JavaScript code and browser add-ons/extensions