JavaScript: How to redirect a page after validation

JavaScript: How to redirect a page after validation

To redirect a page in JavaScript after performing validation, you can use the window.location.href property to set the new URL. Here's an example:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Redirection after Validation</title> </head> <body> <form onsubmit="validateAndRedirect(event)"> <input type="text" id="inputField" placeholder="Enter something"> <button type="submit">Submit</button> </form> <script> function validateAndRedirect(event) { event.preventDefault(); // Prevent the form from submitting by default // Perform your validation logic here var inputField = document.getElementById("inputField").value; if (!inputField) { alert("Please enter something."); return; } // If validation passes, redirect to a new page window.location.href = "https://example.com"; // Replace with your desired URL } </script> </body> </html>

In this example:

  • The validateAndRedirect function is called when the form is submitted.
  • The event.preventDefault() prevents the form from submitting by default.
  • Validation logic is performed (you can customize this part based on your requirements).
  • If validation passes, the window.location.href is set to the desired URL, and the page is redirected.

Make sure to replace "https://example.com" with the actual URL you want to redirect to. Adjust the validation logic as needed for your specific use case.

Examples

  1. Redirect on Successful Form Validation:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { window.location.href = 'success.html'; return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

  2. Redirect with Delay after Successful Validation:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { setTimeout(function() { window.location.href = 'success.html'; }, 2000); // 2 seconds delay return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

  3. Redirect with Query Parameters after Validation:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { var username = document.getElementById('username').value; // replace with actual field ID window.location.href = 'success.html?user=' + encodeURIComponent(username); return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

  4. Redirect with Hash Fragment after Validation:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { window.location.href = 'success.html#confirmation'; return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

  5. Redirect with Session Storage Data after Validation:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { sessionStorage.setItem('successMessage', 'Validation successful!'); window.location.href = 'success.html'; return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

  6. Redirect on Button Click with Confirmation:

    <button onclick="redirectAfterConfirmation()">Click Me</button> <script> function redirectAfterConfirmation() { if (confirm('Are you sure you want to proceed?')) { window.location.href = 'target.html'; } } </script>

  7. Redirect Based on Radio Button Selection:

    <input type="radio" id="option1" name="options" value="option1"> <input type="radio" id="option2" name="options" value="option2"> <button onclick="redirectBasedOnSelection()">Submit</button> <script> function redirectBasedOnSelection() { if (document.getElementById('option1').checked) { window.location.href = 'option1.html'; } else if (document.getElementById('option2').checked) { window.location.href = 'option2.html'; } else { alert('Please select an option.'); } } </script>

  8. Redirect with Local Storage Data after Validation:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { localStorage.setItem('successMessage', 'Validation successful!'); window.location.href = 'success.html'; return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

  9. Redirect Based on Dropdown Selection:

    <select id="destinationSelect"> <option value="page1">Page 1</option> <option value="page2">Page 2</option> </select> <button onclick="redirectBasedOnSelection()">Submit</button> <script> function redirectBasedOnSelection() { var selectedOption = document.getElementById('destinationSelect').value; window.location.href = selectedOption + '.html'; } </script>

  10. Redirect with a Loading Spinner and Delay:

    <form onsubmit="return validateForm()"> <!-- form fields go here --> <button type="submit">Submit</button> <div id="loadingSpinner" style="display:none;">Loading...</div> </form> <script> function validateForm() { // perform validation if (/* validation passes */) { document.getElementById('loadingSpinner').style.display = 'block'; setTimeout(function() { window.location.href = 'success.html'; }, 2000); // 2 seconds delay return true; } else { alert('Validation failed. Please check your input.'); return false; } } </script>

More Tags

jcombobox rounded-corners angular2-google-maps cxf sapui5 object-detection lamp java.util.concurrent same-origin-policy dylib

More Programming Questions

More Math Calculators

More Financial Calculators

More Internet Calculators

More General chemistry Calculators