添加验证码验证

Question

Im trying to validate an addition captcha made with PHP but everything I try just messes up the validation and doesn't validate at all. The captcha will display 2 random numbers and a test field that the user can add the correct number to the sum provided. I have tried various thing but all of the just stop the form from validating at all.

<div class="Row">
<div class="Lable">First Name:</div> <!--End of Lable-->
<div class="input">
<input type="text" id="firstname" class="detail" name="firstname" placeholder="First Name"  />
</div> <!--End input-->
</div> <!--End row-->

<br />
<div class="Row">
<div class="Lable">Second Name:</div> <!--End of Lable-->
<div class="input">
<input type="text" id="secondname" class="detail" name="secondname" placeholder="Second Name"  />
</div> <!--End input-->
</div> <!--End row-->


<br />
<div class="Row">
<div class="Lable">Email Address:</div> <!--End of Lable-->
<div class="input">
<input type="text" id="emailaddress" class="detail" name="emailaddress" placeholder="Email Address" />
</div> <!--End input-->
</div> <!--End row-->

    <br />
<div class="Row">
<div class="Lable">Your Message:</div> <!--End of Lable-->
<div class="input">
<textarea id="comment" name="comment" class="mess" placeholder="Your Message" minlength="10"></textarea>
</div> <!--End input-->
</div> <!--End row--> 

<br />
<input id="number1" name="number1" readonly="readonly" class="Add" value="<?php echo rand(1,4) ?>" /> + 
<input id="number2" name="number2" readonly="readonly" class="Add" value="<?php echo rand(5,9) ?>" /> =
<input type="text" name="captcha" id="captcha" class="captcha" maxlength="2" />
<span id="spambot">(Are you human, or spambot?)</span>

<br />
<div class="submit">
<input type="submit" id="send" Name="send" value="Send"  />
</div><!--End of submit-->

<div class="Clear">
<input type="reset" id="clear" Name="Clear" value="Clear" />
</div>

JavaScript validation

if (Contact.firstname.value == "")
{
  alert("Please enter your first name");
  return false;
} 
   if (Contact.secondname.value == "")
{
  alert("Please enter your second name");
  return false;
} 


 else if (Contact.emailaddress.value.indexOf('@') < 1 )
 {  
   alert("Please enter your email correctly");
   return false;
 }
if (Contact.comment.value == "")
{
  alert("Please enter your message");
  return false;
} 



return true;
}

//-->
</script>

I know that there is no validation attempt made on here but please believe me that I have give it a shot before posting but had no luck.

Answer 1

First of all... this is a kind of bad approach as, speaking from experience, it is not worth to reinvent the wheel!

If you have the posibility to use jQuery i'd advise a validation plugin, like this one (i've used it for years) http://jqueryvalidation.org/

It has pretty good docs and you'll be able to extend it to include your addition of numbers (i know i've done something like that in the past)!

Also, it has a pretty large user base and you will find many questions asked here, whose answers will help you figure out your issues!

++You have the option to either display each error next to the form fields, or alert() the errors to the user