I am using the Validation Plugin for jQuery and it works wonders. Except when I have a group of checkboxes...the error messages will display right after the first checkbox..
Why not use a custom validation method ? Something like this:
jQuery:
// The custom validation method, returns FALSE (invalid) if there are
// no checkboxes (with a .one_required class) checked
$.validator.addMethod("one_required", function() {
return $("#myform").find(".one_required:checked").length > 0;
}, 'Please select at least one vehicle.');
$("#myform").validate({
// Use the built-in errorPlacement function to place the error message
// outside the table holding the checkboxes if they are the ones that
// didn't validate, otherwise use the default placement.
errorPlacement: function(error, element) {
if ($(element).hasClass("one_required")) {
error.insertAfter($(element).closest("table"));
} else {
error.insertAfter(element);
}
}
});
HTML:
<form id="myform">
<!-- table, rows, etc -->
<td align="center"><input type="checkbox" class="one_required" name="selectItems[]" value="NA245852" /></td>
<td>NA245852</td>
<!-- more rows, end table, etc -->
<br/>
<input type="submit" value="Go, baby !">
</form>
Since the jQuery Validate plugin can also validate an element if the method name is present as a class
, simply output the .one_required
class on all checkboxes.
See a working demo on JSFiddle with multiple checkboxes.
EDIT:
Here's your own code with the above solution implemented.
Hope this helps !
You can use errorLabelContainer configuration option.. define a div with an id like errorMessages and then change your validate method call as follows:
$("form").validate({
errorLabelContainer: $("#errorMessages"),
rules: ..... your rules
Now all the error messages will be displayed in the div. Edit: Updated the answer below to reflect the updates to the question: To change the location of error messages displayed, I can think of using the errorPlacement config parameter. You can use something like: Define a div or a p and keep appending the messages for the checkboxes to this element.
$("form").validate({
errorPlacement:function(error,element) {
if (element.attr("name") == "selectItems") {
//Add Code to append the error message to a predefined element
$("#errorDiv").html("");
$("#errorDiv").append("<YOUR_CUSTOM_MESSAGE>");
} else {
error.insertAfter(element);
}
},
rules: ..... your rules
});
jsFiddle URL: http://jsfiddle.net/Z8hWg/28/
EDIT: Change your javascript to as follows:
<script type="text/javascript">
$(document).ready(function(){
var formValidator = {};
$("#Date").datepicker();
formValidator = $("#form1").validate({
errorPlacement:function(error,element) {
if (element.attr("name") == "selectedItems") {
//Add Code to append the error message to a predefined element
$("#errorDiv").html("Select at least one vehicle");
} else {
error.insertAfter(element);
}
},
rules: {
avgTime:{
required:true,
number:true
},
selectedItems:
{
required:true
},
Date:{
required:true,
date:true
}
},
//onclick: true,
submitHandler: function(form) {
$("#errorDiv").html("");
form.submit();
}
});
$("input[name=selectedItems]").bind("change", function() {
var me = $(this);
var scoper = me.parent().parent();
var otherInputs = $("input[name^=mileage]", scoper);
otherInputs.attr("disabled", !this.checked);
otherInputs.attr("value","");
if (this.checked)
{
otherInputs.addClass('required number');
$("#errorDiv").html("");
}
else
{
otherInputs.removeClass("required number");
}
formValidator.element("input[name=selectedItems]");
});
});
</script>