Validation only highlights one field at a time for form requiring checking one of the checkboxes
I had to manually add validation for checkboxes for this Bootstrap page and now only one text field form field highlights at a time. For example, clicking submit once will highlight "First Name", clicking it a second time will highlight "Last Name" and so forth. We need all blank required fields to highlight at the same time.
I used to include all form field names below within "rules", but no longer need to do that, since we're using Bootstrap's default validation. However, I haven't found a more elegant way to require that at least one checkbox be checked in a form group of checkboxes.
- $("input, select").keypress(function(evt) {
- var charCode = evt.charCode || evt.keyCode;
- if (charCode == 13) {
- $("#submit").trigger("click");
- return false;
- }
- });
-
- $("#theForm").validate({
- rules: {
- },
-
- errorPlacement: function(error, element) {
- error.insertBefore(element);
- var $el = $(element), name;
- if ($el.attr('type') === 'checkbox' && (name = $el.attr('name'))) {
- addErrorStateToCheckboxes(name);
- }
- },
-
- errorPlacement: function(error, element) {
- error.insertBefore(element);
-
- $('#q1').addClass("checkboxError");
- $("#q1").checked.removeClass("checkboxError");
- },
-
-
- submitHandler: function(form) {
- $('.formContainer').hide();
- $('#thankyou').modal('show');
- HTMLFormElement.prototype.submit.call(form);
- }
- });
- });