Member Avatar for emilyhedgecock

I have a simple html form and i have a small piece of script which validates it,
I would like it so that after the validation is carried out, if the return value is true, then the user will be redirected to index.html
i have tried several pieces of code to the end of my validation script but i cant get the page to change
Any help would be appreciated

Here is my javascript code

function validate_form ( )
{
   var illegalChars= /[\(\)\<\>\,\;\:\\\/\"\[\]]/;

   valid = true;

   if ( document.contactform.firstname.value == "" )
        {
                document.contactform.firstname.style.background= 'Yellow';
                alert ( "Please fill in the 'First Name' box." );
                valid = false;
        }

   if ( document.contactform.lastname.value == 0 )
        {
                document.contactform.lastname.style.background= 'Yellow';
                alert ( "Please fill in the 'Last Name' box." );
                valid = false;
        }        

   if (document.contactform.email.value.match(illegalChars)) 
        {

                document.contactform.email.style.background= 'Yellow';
                alert ( "Illegal Characters" );
                valid = false;
        }
  
   if ( document.contactform.email.value == 0 )
        {
                document.contactform.email.style.background= 'Yellow';
                alert ( "Please fill in the 'Email' box." );
                valid = false;
        }        

   if ( document.contactform.message.value == 0 )
        {
                document.contactform.message.style.background= 'Yellow';
                alert ( "Please fill in the 'Message' box." );
                valid = false;
        }        
      
   return valid;
}
  • 4 Contributors
  • 3 Replies
  • 7K Views
  • 4 Months Discussion Span
  • Latest Post Latest Post by Taywin

Dani AI

Generated

Two ways to redirect after validation, depending on your goal:

  • If you want to submit the form and let the server (or the form action) do the navigation, allow the submit to proceed when validation passes. This keeps your data submission intact and is the most reliable pattern.
  • If you do not need to submit any data and just want to navigate on success, prevent the submit and change window.location.

Example using an unobtrusive submit handler:

document.addEventListener('DOMContentLoaded', function () {
  var form = document.forms['contactform'];
  form.addEventListener('submit', function (e) {
    if (!validate_form()) {
      e.preventDefault(); // stay on page if invalid
      return;
    }
    // EITHER let the form submit naturally to its action (no code here)
    // OR navigate client-side without submitting:
    // e.preventDefault();
    // window.location.assign('index.html');
  });
});

Also check your field checks: comparing text inputs to 0 will not catch empty strings. Use value.trim() === '' for emptiness, and prefer type="email" plus the Constraint Validation API for email checks. Client-side checks are for UX only; always validate on the server and handle the final redirect there when possible. See MDN: submit event and MDN: Location for details.

Recommended Answers

All 3 Replies

Member Avatar for jonathanroy

Your javascript seems good but do you have something like this in your html form?

<form action="submit.html" onsubmit="validate_form()">...</form>

If your function returns true then the form will be submitted and the user redirected to submit.html. Else (if the function returns false) the user will stay on the page and the error message will pop.

Hope that works!

Member Avatar for paulev32

Your illegalchars VAR contains unescaped speechmarks, is this cancelling out some of your code as it's enclosed in unexpected speech marks?

var illegalChars= /[\(\)\<\>\,\;\:\\\/\[B]"[/B]\[\]]/;
Member Avatar for Taywin

I think it should be...

<form action="submit.html" onsubmit="return validate_form()">...</form>

instead of...

<form action="submit.html" onsubmit="validate_form()">...</form>

EDIT: This is old thread!!!

Edited by Taywin because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.