使用JavaScript验证表单？

Question

I am trying to use the following code to validate my form before a user can submit.

javascript:

<script>
    function validateForm() {
     var x = document.forms["register"]["firstname"].value;
     var x = document.forms["register"]["lastname"].value;
     var x = document.forms["register"]["email"].value;
     var x = document.forms["register"]["email2"].value;
     if (x == null || x == "") {
         $(".form_error").show();
         return false;
     }
 }
 </script>

my form basically looks like this:

Section 1:

<form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post">

<div class="form_error">Ooops! There is some missing or incorrect information. Please look back over this section. </div> 

<input type="text" name="firstname" class="login_form2"><br/>
<input type="text" name="lastname" class="login_form2"><br/> 

Section 2

<form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post">

<div class="form_error2">Ooops! There is some missing or incorrect information. Please look back over this section. </div> 

<input type="text" name="email" class="login_form2"><br/>
<input type="text" name="email2" class="login_form2"><br/>  

Section 3

    <form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post">

    <div class="form_error3">Ooops! There is some missing or incorrect information. Please look back over this section. </div> 

    <input type="text" name="username" class="login_form2"><br/>
    <input type="text" name="password" class="login_form2"><br/>  

I have basically broken my form into three sections, and when a user submits the form they are suppose to get one of 3 possible errors/divs which tell the user which section they need to go back and revise.

I am trying to amend my javascript code like below so that I can basically run a different check for the input boxes in my form for each section and display the different div elements depending on which input box from the appropriate section causes the error. can someone please show me what I would need to do to make this work. thanks in advance.

<script>
        function validateForm() {
         var x = document.forms["register"]["firstname"].value;
         var x = document.forms["register"]["lastname"].value;
         if (x == null || x == "") {
         $(".form_error").show();
         return false;
         var x = document.forms["register"]["email"].value;
         var x = document.forms["register"]["email2"].value;
         if (x == null || x == "") {
             $(".form_error2").show();
             return false;
         var x = document.forms["register"]["username"].value;
         var x = document.forms["register"]["password"].value;
         if (x == null || x == "") {
             $(".form_error2").show();
             return false;



         }
     }
     </script>

Answer 1

Every time you do this:

var x = document.forms["register"]["firstname"].value;
var x = document.forms["register"]["lastname"].value;

you're (needlessly) redeclaring x , and throwing away the first field's value. It will never be checked.

You're also missing a number of closing } s.

Try something like:

function validateForm() {
  var x = document.forms["register"]["firstname"].value;
  var y = document.forms["register"]["lastname"].value;
  if ((! x) || (! y)) {     // "! x" covers both null and "" cases
    $(".form_error").show();
    return false;
  } 

  x = document.forms["register"]["email"].value;
  y = document.forms["register"]["email2"].value;
  if ((! x) || (! y)) {     
    $(".form_error2").show();
    return false;
  }

  x = document.forms["register"]["username"].value;
  y = document.forms["register"]["password"].value;
  if ((! x) || (! y)) {     
    $(".form_error2").show();
    return false;
  }
}

Answer 2

Well this may just be me, but you are overriding the value of x repeatedly here:

var x = document.forms["register"]["firstname"].value;
var x = document.forms["register"]["lastname"].value;
var x = document.forms["register"]["email"].value;
var x = document.forms["register"]["email2"].value;

it looks to me as if x would then be given a new value every time and then would only contain the last value it was asigned. Essentially, if the last box is filled in, the form will be counted "valid". Make an array and store each value into its own index, then use a for loop to go through them and check if any are equal to null or an empty string.

var x = [];
x[0] = document.forms["register"]["firstname"].value;
x[1] = document.forms["register"]["lastname"].value;
x[2] = document.forms["register"]["email"].value;
x[3] = document.forms["register"]["email2"].value;

x.forEach(function(element, index, array) {

if (element == null || element == "") {

$(".form_error").show();
return false;

}

});