jQuery error message for group of fields
by Kishore Sahasranaman
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form action="test.php" method="post" enctype="multipart/form-data" id="addFac-form" novalidate>
<label>Type</label>
<select name="Exh_type">
<option value="none"></option>
<option value="Atrium">Atrium</option>
<option value="Red Carpet">Red Carpet</option>
<option value="Gallery C Ground Floor">Gallery C Ground Floor</option>
<option value="Gallery B Ground Floor">Gallery B Ground Floor</option>
<option value="Gallery C Third Floor">Gallery C Third Floor</option>
<option value="Gallery B Third Floor">Gallery B Third Floor</option>
</select>
<br>
<label>Capacity</label>
<input type="text" name="Lib_capacity" dir="ltr">
<br>
<label>Another Type</label>
<select name="Toi_type">
<option value="none"></option>
<option value="Single Surface Area">Single Surface Area</option>
<option value="Common Surface Area">Common Surface Area</option>
</select>
<br>
<input type="submit" value="Add" name="add" id="add">
</form>
JavaScript
// JavaScript Document
//jQuery Form Validation code
(function ($, W, D) {
var JQUERY4U = {};
JQUERY4U.UTIL = {
setupFormValidation: function () {
var ruleSetCapacity = {
required: true,
checkCapacity: true
};
var ruleSetType = {
required: true,
checkType: true
};
$("#addFac-form").validate({
errorElement: 'div',
rules: {
capacity: ruleSetCapacity,
Lib_capacity: ruleSetCapacity,
Cli_capacity: ruleSetCapacity,
Sba_capacity: ruleSetCapacity,
Gwt_capacity: ruleSetCapacity,
Exh_type: ruleSetType,
Toi_type: ruleSetType,
Ga_type: ruleSetType,
},
// Specify the validation error messages
messages: {
Lib_capacity : "Enter capacity",
Exh_type: "Enter type",
Toi_type: "Enter type",
},
submitHandler: function (form) {
form.submit();
}
});
jQuery.validator.addMethod('checkType', function (value) {
return (value != 'none');
});
}
}
$(D).ready(function ($) {
JQUERY4U.UTIL.setupFormValidation();
});
})(jQuery, window, document);