i have a form that should be posted to a payments page, it worked fine untill i desided to add some error checking to it using jquery...
if i get rid of the class on the submit button (ValidateForm)
it works but obviously doesn't do the error checking...
[code=php]
<form id="contactForm " class="paypal" action="paypal/payments.php" method="post">
<input class="text" name="ContactFo rmTitle" id="ContactForm Title" value="" maxlength="32" size="32" type="text">
<div id="errTitle" style="display: none;">Please enter the Title</div>
<tr id="errFirstNam e" style="display: none;">
<div>Please enter your correct First Name</div>
<td class="maincont ent">First name *</td>
<input class="text" name="ContactFo rmFirstName" id="ContactForm FirstName" value="" maxlength="256" size="50" validate="popul ated" type="text">
<tr id="errLastName " style="display: none;">
<div>Please enter your correct Last name</div>
<td class="maincont ent"> &nbs p;</td>
<td class="maincont ent">Last name *</td>
<input class="text" name="ContactFo rmLastName" id="ContactForm LastName" value="" maxlength="256" size="50" validate="popul ated" type="text">
<tr id="errHouseNum ber" style="display: none;">
<td> <div>Please enter the House number</div> </td>
<td class="maincont ent"> &nbs p;</td>
<td class="maincont ent">House number *</td>
<input class="text" name="ContactFo rmHouseNumber" id="ContactForm HouseNumber" value="" maxlength="64" size="10" validate="popul ated" type="text">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input type="hidden" name="no_shippi ng" value="0">
<input name="currency_ code" type="hidden" value="GBP" />
<input type="submit"
class="Valadate Form"
value="Continue " />
</form>
[/code]
jquery...
[code=javascript]
$(function() {
$(".ValadateFor mAndUploadDetai lsToDatabase"). click(function( e){
e.preventDefaul t();
// validate and process form here
$('#errFirstNam e').hide();
var FirstName = $("input#Contac tFormFirstName" ).val();
var FirstNameLength = FirstName.lengt h;
if ( (FirstNameLengt h <= 2) || ( FirstNameLength > 40 ) ) {
$("#errFirstNam e").show();
$("input#Contac tFormFirstName" ).focus();
return false;
}
$('#errLastName ').hide();
var LastName = $("input#Contac tFormLastName") .val();
var LastNameLength = LastName.length ;
if ( (LastNameLength <= 2) || ( LastNameLength > 40 ) ) {
$("#errLastName ").show();
$("input#Contac tFormLastName") .focus();
return false;
}
$('#errHouseNum ber').hide();
var HouseNumber = $("input#Contac tFormHouseNumbe r").val();
if ( (HouseNumber == "") || ( HouseNumber == 0 ) ) {
$("#errHouseNum ber").show();
$("input#Contac tFormHouseNumbe r").focus();
return false;
}
$('#errPostcode ').hide();
var Postcode = $("input#Contac tFormPostcode") .val();
var PostcodeLength = Postcode.length ;
if ( (PostcodeLength > 8) || (PostcodeLength <= 5) ) {
$("#errPostcode ").show();
$("input#Contac tFormPostcode") .focus();
return false;
}
$('#errEmail'). hide();
$('#errConfirmE mail').hide();
$('#errEmailMat ch').hide();
var Email = $("input#Contac tFormEmail").va l();
var EmailLength = Email.length;
var ConfirmEmail = $("input#Contac tFormConfirmEma il").val();
var ConfirmEmailLen gth = ConfirmEmail.le ngth;
if ( (EmailLength < 5 ) || (EmailLength > 40 ) ) {
$("#errEmail"). show();
$("input#Contac tFormEmail").fo cus();
return false;
}
if ( (ConfirmEmailLe ngth < 5 ) || ( ConfirmEmailLen gth > 40 ) ) {
$("#errConfirmE mail").show();
$("input#Contac tFormConfirmEma il").focus();
return false;
}
if ( (Email != ConfirmEmail ) ) {
$("#errEmailMat ch").show();
$("input#Contac tFormEmail").fo cus();
return false;
}
});
});
[/code]
if i get rid of the class on the submit button (ValidateForm)
it works but obviously doesn't do the error checking...
[code=php]
<form id="contactForm " class="paypal" action="paypal/payments.php" method="post">
<input class="text" name="ContactFo rmTitle" id="ContactForm Title" value="" maxlength="32" size="32" type="text">
<div id="errTitle" style="display: none;">Please enter the Title</div>
<tr id="errFirstNam e" style="display: none;">
<div>Please enter your correct First Name</div>
<td class="maincont ent">First name *</td>
<input class="text" name="ContactFo rmFirstName" id="ContactForm FirstName" value="" maxlength="256" size="50" validate="popul ated" type="text">
<tr id="errLastName " style="display: none;">
<div>Please enter your correct Last name</div>
<td class="maincont ent"> &nbs p;</td>
<td class="maincont ent">Last name *</td>
<input class="text" name="ContactFo rmLastName" id="ContactForm LastName" value="" maxlength="256" size="50" validate="popul ated" type="text">
<tr id="errHouseNum ber" style="display: none;">
<td> <div>Please enter the House number</div> </td>
<td class="maincont ent"> &nbs p;</td>
<td class="maincont ent">House number *</td>
<input class="text" name="ContactFo rmHouseNumber" id="ContactForm HouseNumber" value="" maxlength="64" size="10" validate="popul ated" type="text">
<input name="cmd" type="hidden" value="_xclick" />
<input name="no_note" type="hidden" value="1" />
<input name="lc" type="hidden" value="UK" />
<input type="hidden" name="no_shippi ng" value="0">
<input name="currency_ code" type="hidden" value="GBP" />
<input type="submit"
class="Valadate Form"
value="Continue " />
</form>
[/code]
jquery...
[code=javascript]
$(function() {
$(".ValadateFor mAndUploadDetai lsToDatabase"). click(function( e){
e.preventDefaul t();
// validate and process form here
$('#errFirstNam e').hide();
var FirstName = $("input#Contac tFormFirstName" ).val();
var FirstNameLength = FirstName.lengt h;
if ( (FirstNameLengt h <= 2) || ( FirstNameLength > 40 ) ) {
$("#errFirstNam e").show();
$("input#Contac tFormFirstName" ).focus();
return false;
}
$('#errLastName ').hide();
var LastName = $("input#Contac tFormLastName") .val();
var LastNameLength = LastName.length ;
if ( (LastNameLength <= 2) || ( LastNameLength > 40 ) ) {
$("#errLastName ").show();
$("input#Contac tFormLastName") .focus();
return false;
}
$('#errHouseNum ber').hide();
var HouseNumber = $("input#Contac tFormHouseNumbe r").val();
if ( (HouseNumber == "") || ( HouseNumber == 0 ) ) {
$("#errHouseNum ber").show();
$("input#Contac tFormHouseNumbe r").focus();
return false;
}
$('#errPostcode ').hide();
var Postcode = $("input#Contac tFormPostcode") .val();
var PostcodeLength = Postcode.length ;
if ( (PostcodeLength > 8) || (PostcodeLength <= 5) ) {
$("#errPostcode ").show();
$("input#Contac tFormPostcode") .focus();
return false;
}
$('#errEmail'). hide();
$('#errConfirmE mail').hide();
$('#errEmailMat ch').hide();
var Email = $("input#Contac tFormEmail").va l();
var EmailLength = Email.length;
var ConfirmEmail = $("input#Contac tFormConfirmEma il").val();
var ConfirmEmailLen gth = ConfirmEmail.le ngth;
if ( (EmailLength < 5 ) || (EmailLength > 40 ) ) {
$("#errEmail"). show();
$("input#Contac tFormEmail").fo cus();
return false;
}
if ( (ConfirmEmailLe ngth < 5 ) || ( ConfirmEmailLen gth > 40 ) ) {
$("#errConfirmE mail").show();
$("input#Contac tFormConfirmEma il").focus();
return false;
}
if ( (Email != ConfirmEmail ) ) {
$("#errEmailMat ch").show();
$("input#Contac tFormEmail").fo cus();
return false;
}
});
});
[/code]
Comment