CODEWITHSUNDEEP
javascriptformsvalidationfunctionif-statement
meow
meow

Reputation: 3

javascript form validation?

do i need to add a variable or something? D: help, please?

 <html>
<head>
<script language="javascript" type="text/javascript">
function sub()
{
validateForm();
}
function validateForm()
{
if (document.forms.myForm.fname.value == "" || document.forms.myForm.fname.value == " ")
  {
  alert("First name must be filled out");
  }
if (document.forms.myForm.lname.value == "" || document.forms.myForm.lname.value == " ")
{
alert("Last name must be filled out");
}
else
{
window.location = "ok.html";
}
}
</script>
</head>

<body>
<form name="myForm">
First name: <input type="text" name="fname">
<br>
Last name: <input type="text" name="lname">
<br>
<input type="button" value="Submit" onclick="sub()">
</form>
</body>
</html>

ok so, my code works kind of - i'm not sure how to change that 'else' statement to get it to redirect to the next page if the forms are valid.. do i need to add a variable or...? so basically the code does what i want until you only enter the last name field then it shows the error message but it redirects still -
how do i make it so the code redirects to the success page if both of the fields are valid?

(i don't know much on javascript :/ and i know you can make it alot simplier but we HAVE to do it this way so we force the code to do it or whatever)

Upvotes: 0

Views: 190

Answers (1)

corazza
corazza

Reputation: 32354

This should do the trick:

<html>
    <head>
        <script language="javascript" type="text/javascript">
            function validateForm()
            {
                var worked = true;

                if (document.forms.myForm.fname.value == "" || document.forms.myForm.fname.value == " ")
                {
                    alert("First name must be filled out");
                    worked = false;
                }
                if (document.forms.myForm.lname.value == "" || document.forms.myForm.lname.value == " ")
                {
                    alert("Last name must be filled out");
                    worked = false;
                }

                if (worked)
                {
                    window.location = "ok.html";
                }
            }
        </script>
    </head>

    <body>
        <form name="myForm">
            First name: <input type="text" name="fname">
            <br />
            Last name: <input type="text" name="lname">
            <br />

            <input type="button" value="Submit" onclick="validateForm();">
        </form>
    </body>
</html>

There are numerous ways to do this simple task, and this is how you would do it with a variable. Basically, if any of the checks fail, the variable worked is set to false (to indicate that something didn't work), and only if that variable is left intact (true), can the user proceed to the next step.

PS: ident your code (see how my code is easier to read than yours?). PPS: you definitely shouldn't rely only on JS to validate your forms, you must check it on your servers as well. Someone can easily bypass these checks, as they are only for convenience.

Upvotes: 1

Related Questions