jquery validation errors do not disappears when they validate true.
Hello all,
my validation code:
- $("#incubation").formwizard(
- {
- formPluginEnabled: true,
- validationEnabled: true,
- focusCleanup: true,
-
- formOptions:
- {
- success: function(data)
- {
- $("#incubation")[0].reset();
-
- $("#incubation").formwizard("show","firstStep");
- },
- dataType: 'json',
- resetForm: true
- },
- validationOptions:
- {
- ignore: ".hidden",
- rules:
- {
- species:
- {
- required: true,
- remote:
- {
- url: "validate_livestock_form/validate_form/field/species",
- type: "post",
- }
- },
- start_date:
- {
- required: true,
- remote:
- {
- url: "validate_livestock/validate_form/field/start_date",
- type: "post",
- }
- },
- hatched_date:
- {
- required: "#hatched:checked",
- remote:
- {
- url: "validate_livestock/validate_form/field/hatched_date",
- type: "post",
- }
- },
- incubation_location:
- {
- required: true,
- remote:
- {
- url: "validate_livestock/validate_form/field/incubation_location",
- type: "post",
- }
- },
- },
- messages:
- {
- species:
- {
- remote: "Choose a species!"
- },
- start_date:
- {
- remote: "Start date field is required!"
- },
- hatched_date:
- {
- remote: "Hatched date field is required!"
- },
- incubation_location:
- {
- remote: "Location field is required!"
- }
- },
- errorPlacement: function(error, element)
- {
- var elementName = element.attr("name");
-
- error.appendTo($("label[for=" + elementName + "]"));
- },
- },
- });
form code:
- <form id="incubation" method="post" action="submit_incubation">
-
- <fieldset>
- <h3 class="ui-widget-header ui-corner-all" style="margin:0; padding:3px">Add Egg To Incubator</h3>
- <p> Please enter information below. * fields are required! </p>
- <div id="firstStep" class="step">
- <div>
- <input id="id" type="hidden" name="id" /><br />
- <label for="species" id="species">*Species:</label><br />
- <select id="species" name="species" size="1">
- <option value="">Please choose a species</option>
- <option value="21">Chicken</option>
- <option value="28">Turkey</option>
- </select>
- </div>
- <br />
- <div>
- <label for="start_date">*Start date:</label><br />
- <div id="startdate_div"><input name="start_date" type="text" id="start_date" class="hidden" /></div>
- </div>
- <br />
- <div>
- <label for="estimated_hatching_date">Estimated Hatching Date:</label><br />
- <div id="estimated_hatching_date"></div>
- </div>
- <br />
- <div>
- <label for="hatched_date">Hatched date:</label>Hatched? YES<input name="hatched" type="checkbox" id="hatched" value="" /><br />
- <div id="hatched_div"><input name="hatched_date" type="text" id="hatched_date" class="hidden" /></div>
- </div>
- <br />
- <div>
- <label for="incubation_location">*Location:</label><br />
- <div id="incubation_location"></div><br />
- </div>
- </div>
- <div id="lastStep" class="step">
- Egg information has been added to the database successfully!
- </div>
- <br />
- <input type="button" value="button" id="testbtn" />
-
- <input class="navigation_button" value="Back" type="reset" />
- <input class="navigation_button" value="Next" type="submit" />
- <input id="resetaddlivestockForm" value="Reset" type="button" />
- </fieldset>
-
- </form>
Form validation validates as expected. When I press submit the form validates and the error messages show next to their corresponding elements. When I edit the element so the element passes validation the error still shows. However, the species select element is the only element where its error label disappears correctly. All the other elements error labels stay. Why is this happening and how do I fix this?
-Thank You,
rich