[jQuery] [validate] form is sending despite the fact the form is not complete
Just like the subject says, my form is sending despite the fact that
the form is not complete. The same happens if there are errors in the
form. I've attached the JS and the HTML. Any help is greatly
appreciated. I'm testing it locally right now.
$("#reserve").validate({
rules: {
firstname: {
lettersonly: true,
required: true
},
last: {
lettersonly: true,
required: true
},
address: {
required: true
},
city: {
lettersonly: true,
required: true
},
state: {
required: true,
drop: true,
required: true
},
zip: {
zipcode: true,
required: true
},
numfirst: {
digits: true,
required: true
},
numsecond: {
digits: true,
required: true
},
numthird: {
digits: true,
required: true
},
tickets: {
drop: true,
required: true
},
email: {
email: true,
required: true
}
},
messages: {
firstname: "Please enter a valid first name",
last: "Please enter a valid last name",
address: "Please enter a valid address",
city: "Please enter a valid city",
state: "Please enter a valid state",
zip: "Please enter a valid zip code",
numfirst: "Please enter the first three numbers of your phone
number",
numsecond: "Please enter the second three numbers of your phone
number",
numthird: "Please enter the first last four of your phone number",
tickets: "Please enter a number of tickets you would like",
email: "Please enter a valid email address"
},
errorPlacement: function(error, element){
if(element.attr('name') == 'email')
{
error.insertAfter($('input[name=email]'));
$('<br />').insertBefore('label.error');
}
else if(element.attr('name') == 'numfirst')
{
error.insertAfter($('input[name=numthird]'));
$('<br />').insertAfter($('input[name=numthird]'));
}
else if(element.attr('name') == 'numsecond')
{
error.insertAfter($('input[name=numthird]'));
$('<br />').insertAfter($('input[name=numthird]'));
}
else
{
error.insertAfter(element);
$('<br />').insertAfter(element);
}
}
});
<form id="reserve" method="post" action="http://localhost/agraboats/
form.php">
First Name: <input type="text"value="" name="firstname"
id="firstname" /><br />
Last Name: <input type="text"value="" name="last" id="last" /><br />
Address: <input type="text"value="" name="address" id="address" /