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"
/
><br />
City: <input type="text"value="" name="city" id="city" /><br />
<select name="state" size="1" id="state">
<option value="AL">Alabama</option><option
value="AK">Alaska</
option><option value="AZ">Arizona</option><option value="AR">Arkansas</
option><option value="CA">California</option><option
value="CO">Colorado</option><option value="CT">Connecticut</
option><option value="DE">Delaware</option><option value="DC">Dist of
Columbia</option><option value="FL">Florida</option><option
value="GA">Georgia</option><option value="HI">Hawaii</option><option
value="ID">Idaho</option><option value="IL">Illinois</option><option
value="IN">Indiana</option><option value="IA">Iowa</option><option
value="KS">Kansas</option><option value="KY">Kentucky</option><option
value="LA">Louisiana</option><option value="ME">Maine</option><option
value="MD">Maryland</option><option value="MA">Massachusetts</
option><option value="MI">Michigan</option><option
value="MN">Minnesota</option><option value="MS">Mississippi</
option><option value="MO">Missouri</option><option value="MT">Montana</
option><option value="NE">Nebraska</option><option value="NV">Nevada</
option><option value="NH">New Hampshire</option><option value="NJ">New
Jersey</option><option value="NM">New Mexico</option><option
value="NY">New York</option><option value="NC">North Carolina</
option><option value="ND">North Dakota</option><option
value="OH">Ohio</option><option value="OK">Oklahoma</option><option
value="OR">Oregon</option><option value="PA">Pennsylvania</
option><option value="RI">Rhode Island</option><option
value="SC">South Carolina</option><option value="SD">South Dakota</
option><option value="TN">Tennessee</option><option value="TX">Texas</
option><option value="UT">Utah</option><option value="VT">Vermont</
option><option value="VA">Virginia</option><option
value="WA">Washington</option><option value="WV">West Virginia</
option><option value="WI">Wisconsin</option><option
value="WY">Wyoming</option>
</select><br />
Zip: <input type="text"value="" name="address" /><br />
Phone: (<input type="text" size="3" maxlength="3" id="numfirst"
name="numfirst" />) - <input type="text" id="numsecond" size="3"
maxlength="3" name="numsecond" /> - <input type="text" id="numthird"
size="4" maxlength="4" name="numthird" /><br />
Email: <input type="text" name="email" id="email" /><br />
Number of Tickets:
<select name="tickets">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select><br />
Date: <input type="text" name="date" id="date" /><br/>
<input type="submit" value="Reserve Me!" id="send" />
</form>
