surfbird0713
Reputation: 1219
jQuery Validation PlugIn issue - form will not submit
I am using the jQuery validate plug-in for the first time based on the instructions here and it's not working. When I try to submit the form with the required field empty, I see the error message, but the form will not submit. I'm new to jQuery so this is very challenging to troubleshoot on my own.
It is not due to self closing script tags as suggested here I found this too, but I am not seeing any errors in the console.
What am I doing wrong?
Also, after I type something into the required field, the message disappears and the class "valid" is added to the input, along with the error class. This is undesirable - how can I remove it?
Another also - I am implementing this on a site that uses the 1.3.2 library (which I can't change or remove), and the show/hide on the fields will not work with that, so I have to run a newer library in parallel.
I posted a fiddle here: http://jsfiddle.net/4mhNC/1/
and here is my code:
scripts:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
</script>
<script>var $j = jQuery.noConflict(true);</script>
<script type="text/javascript">
$j(document).ready(function() {
$j('#pancettaForm').change(function () {
$j('#address,#new-ship-date').hide();
if ($j('#ship-address').prop('checked')) {
$j('#address, #address2').show();
}
else if ($j('#ship-date').prop('checked')) {
$j('#new-ship-date').show();
}
else if ($j('#ship-both').prop('checked')) {
$j('#address, #address2, #new-ship-date').show();
}
});
$j("#pancettaForm").validate();
});
</script>
HTML:
<form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm">
<input type="hidden" value="Pancetta Order Update" name="subject">
<input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect">
<ul>
<li>
<label for="update-ship">I'd like to:</label>
<input id="ship-address" name="update-ship" type="radio" value="update-ship-address"/> Have pancetta shipped to a different address than my skillet<br />
<input id="ship-date" name="update-ship" type="radio" value="update-ship-date" /> Have pancetta shipped sooner than June 14, 2013 <br />
<input id="ship-both" name="update-ship" type="radio" value="update-both" /> Make changes to both the shipping address and shipping date
</li>
<li>
<label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label>
<input type="text" name="order-number" class="required">
</li>
<li>
<label for="full-name"><em>*</em>Recipient Full Name:</label>
<input type="text" name="full-name">
</li>
<li id="address" style="display: none;">
<label for="address">
<em>*</em>Address
</label>
<input type="text" name="address">
<label for="address2">
Address Line 2
</label>
<input type="text" name="address2">
</li>
<li id="address2" style="display: none;">
<label for="city">
<em>*</em>City
</label>
<input type="text" name="city">
<label for="state">
<em>*</em>State
</label>
<select name="state">
<option>- Select State -</option>
<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">District 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>
<label for="zip">
<em>*</em>Zip Code
</label>
<input type="text" name="zip">
</li>
<li id="new-ship-date" style="display: none;">
<label for="New Ship Date"><em>*</em>New Ship Date:</label>
<select name="newShip" id="newShip">
<option>- Select -</option>
<option value="Wednesday, May 22">Wednesday, May 22</option>
<option value="Thursday, May 23">Thursday, May 23</option>
<option value="Friday, May 24">Friday, May 24</option>
<option value="Wednesday, May 29">Wednesday, May 29</option>
<option value="Thursday, May 30">Thursday, May 30</option>
<option value="Friday, May 31">Friday, May 31</option>
<option value="Wednesday, June 5">Wednesday, June 5</option>
<option value="Thursday, June 6">Thursday, June 6</option>
<option value="Friday, June 8">Friday, June 8</option>
<option value="Wednesday, June 12">Wednesday, June 12</option>
<option value="Thursday, June 13">Thursday, June 13</option>
<option value="Friday, June 14">Friday, June 14 </option>
<option value="Wednesday, June 19">Wednesday, June 19</option>
<option value="Thursday, June 20">Thursday, June 20</option>
<option value="Friday, June 21">Friday, June 21</option>
</select>
</li>
<li>
<label for="phone">
<em>*</em>Phone (for delivery questions)
</label>
<input type="text" name="phone">
</li>
</ul>
<input type="submit" id="button" name="submit" value="Update Pancetta">
</form>
Upvotes: 2
Views: 2590
Answers (1)
Sparky
Reputation: 98738
The debug: true option, by design, will prevent the form from submitting.
Remove it.
You've also included two versions of jQuery for some reason.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
This is a bad practice as they can interfere with each other, so remove the older version.
Upvotes: 3
Related Questions
- jquery validation plugin - not validating on submit
- jQuery Validation Plugin - Form does not submit
- jQuery validation plugin not validating my forms
- jQuery Validation plugin, $("form").submit wont validate the form
- jQuery - Validation plugin submitting form in error
- jQuery Form plugin not submitting while using it with the jQuery Validation plugin
- jQuery validate problems - not working - form just submits
- Form never submits using jQuery validation plugin - even when valid
- Form not getting submitted from jQuery Validation Plugin's submitHandler
- Problem with jQuery Validation Plugin submission?