Utilizing Jquery.validate() for personalized checkbox validation

My struggle lies in integrating jQuery.validate() with custom-designed checkboxes. I am unable to achieve the desired outcome where, upon clicking SUBMIT without selecting any checkboxes, an error should be displayed in the respective label. Despite having no console errors indicating incorrect code, nothing appears at all. Can anyone pinpoint what might be amiss here?

HTML:

<form id="meTaggingForm" class="form-horizontal">
<div class="form-group">
    <label for="gradeRange" class="col-sm-3 control-label">Grade Range<br/><span class="help-block">Check all that apply</span></label>
        <div class="col-sm-9">
        <input type="checkbox" id="myCheckboxK" name="gradeRange"/><label for="myCheckboxK"><i class="ion-ios7-checkmark"></i> K</label>
        <input type="checkbox" id="myCheckbox1" name="gradeRange"/><label for="myCheckbox1"><i class="ion-ios7-checkmark"></i> 1</label>
        <input type="checkbox" id="myCheckbox2" name="gradeRange"/><label for="myCheckbox2"><i class="ion-ios7-checkmark"></i> 2</label>
        <input type="checkbox" id="myCheckbox3" name="gradeRange"/><label for="myCheckbox3"><i class="ion-ios7-checkmark"></i> 3</label>
        <input type="checkbox" id="myCheckbox4" name="gradeRange"/><label for="myCheckbox4"><i class="ion-ios7-checkmark"></i> 4</label>
        <input type="checkbox" id="myCheckbox5" name="gradeRange"/><label for="myCheckbox5"><i class="ion-ios7-checkmark"></i> 5</label>
        <input type="checkbox" id="myCheckbox6" name="gradeRange"/><label for="myCheckbox6"><i class="ion-ios7-checkmark"></i> 6</label>
        <input type="checkbox" id="myCheckbox7" name="gradeRange"/><label for="myCheckbox7"><i class="ion-ios7-checkmark"></i> 7</label>
        <input type="checkbox" id="myCheckbox8" name="gradeRange"/><label for="myCheckbox8"><i class="ion-ios7-checkmark"></i> 8</label>
        <label for="gradeRange" class="error" style="display:none;"></label>
    </div>
</div>
<input type="submit" value="SUBMIT">
</form>

CSS:

input[type="checkbox"] {
    display: none;
}
input[type="checkbox"] + label {
    -webkit-transition: background-color 200ms ease;
    transition: background-color 200ms ease;
    font-size: 13px;
    cursor: pointer;
    border-radius: 3px;
    background-color: #ecf0f1;
    padding: 5px 12px;
    display: inline-block;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input[type="checkbox"]:checked + label {
    -webkit-transition: background-color 200ms ease;
    transition: background-color 300ms ease;
    background-color: #428bca;
    color: #fff;
}

input[type="checkbox"] + label i {
    color: #bdc3c7;
}

input[type="checkbox"]:checked + label i {
    color: white;
}

JS:

$(document).ready(function() {
     var $validator = $("#meTaggingForm").validate({
          rules: {
               gradeRange: {
                    onecheck: true
               }
          }
     });
     $.validator.addMethod('onecheck', function(value, ele) {
        return $("input:checked").length >= 1;
    }, "<i class='fa fa-exclamation-circle'></i>" + "<span>Please select this asset's grade range</span>")
});

Answer №1

The reason behind this behavior is that the jQuery validator will not consider inputs with display: none; by default. To ensure these inputs are included in the validation process, you need to explicitly specify that no input should be ignored by adding ignore: [] in the validator configurations:

var $validator = $("#meTaggingForm").validate({
  ignore: [],
  rules: {
    gradeRange: {
      onecheck: true
    }
  }
});

Take a look at the demo here: https://jsfiddle.net/wd67qyk6/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamically generated nested text inputs with individual v-model bindings upon the clicking of a button

As a newcomer to vuejs, I am attempting to create nested textboxes dynamically with the click of a button. For a clearer explanation, please refer to this jsfiddle link: https://jsfiddle.net/avi_02/qLqvbjvx/ Let's use an analogy to grasp the iss ...

Add a product to your shopping cart in Opencart with the help of Ajax manually

My goal is to automatically add a product to the cart when a user clicks on a button using a custom function that I created. Here is the code for the button: <input type="button" value="Add to cart" onclick="addItemsToCart(83); " class="button btn-suc ...

Converting a class with two lists into an MVC 4 controller with Ajax functionality

Recently, I attempted to send a class with two lists via ajax to an MVC controller. Here is the code for the MVC Controller: [HttpPost] public JsonResult AfficherDetailsFacture(AfficheDetails afficheDetailsFacture) { // do some stuff } Below is the ...

The jQuery validation feature is failing to function properly within a bootstrap modal

I'm facing an issue with the jQuery validation plugin in my express app sign-up form that uses Bootstrap for the front-end. Despite setting rules and messages for name, email, and phone number fields, the validation is not functioning correctly. Below ...

Can you explain the distinction between JSON syntax and object assignment in programming?

While exploring the Twitter Client example on Knockoutjs, one may notice that some properties are included in the JSON object while others are assigned outside of it. What distinguishes these two approaches? And why can't methods such as findSavedList ...

Guide to incorporating tesseract OCR into a Cordova/Phonegap application

My attempts to use Tesseract OCR with my app have been unsuccessful despite following the instructions provided here. After inspecting the code using Google Chrome Dev console through the WebView, I encountered an error: Uncaught SyntaxError: Unexpected ...

When using Lockdown.js with NPM, I encounter a blank file being returned

When using Lockdown.js for NPM, I encountered an issue where the command to generate the lockdown file resulted in an empty file. Here are the links for the dependencies: NPM lockdown git Here is a snippet from my package.json: { "name": "nw", "pri ...

The JQuery datepicker beforeShowDay function is receiving an incorrect date format

I need help with my date picker setup: <link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.17.custom.css"/> <script src="/js/jquery-1.7.1.min.js"></script> <script src="/js/jquery-ui-1.8.17.min.js"></script> < ...

Selecting objects in Three.js using the camera but without using the mouse

I am working on a Three.js app where I need to determine the object that the perspective camera is focusing on. In order to achieve this, I consulted the raycaster documentation. Most of the resources I came across discuss using raycasting with a camera an ...

Prevent random files from being included in RequireJS's r.js optimization process and instead load them asynchronously

Currently, I have successfully implemented RequireJS and a Grunt-based build process that optimizes my JS app into one file using r.js. This consolidation of all app files has proven to be efficient for production deployment. However, the issue arises wit ...

Obtaining an identification using JQuery for content that is constantly changing

I am currently developing dynamic content tabs using PHP, with one of the objects being a datatable within the tab. In order to define the ID via PHP, I use the following code: PHP: echo '<table class="table table-striped table-bordered table-hov ...

Various forms utilizing the same submission function

Is it possible to use the same submit code for multiple forms on a page that contain various products? $('#myform').submit(function() { var queryString = $(this).formSerialize(); alert(queryString); $.ajax ({ t ...

Problem with displaying JSF Bootstrap Glyphicons

I recently encountered a problem in my web app where my Glyphicons in Bootstrap suddenly stopped working, appearing as empty squares for no apparent reason. Even after ensuring that the font files were intact and replacing them with fresh ones from versi ...

Upgrade to the most recent versions of packages using npm

When using npm install --save <package_name>, it typically installs the latest stable version of the package. If you want to specifically install the most recent release, such as Bootstrap v4, you would need to use npm install <a href="/cdn-cgi/l ...

Leveraging AJAX for implementing PHP scripts

While I may not be an MVC model expert, I'm trying to keep my page design separate from my logic in order to simplify things. I have already created a basic template and now I want hyperlinks to open PHP files within the same page. For example: Next ...

Checking the response from an AJAX call with an if/else statement

Is there a way to create a counter for unread messages using PHP and jQuery? Below is the PHP code in BubbleStat.php: $totalMsg = $mysql->totalRows("SELECT msg_id from messages WHERE msg_opened = 0 AND msg_receiver = '".$_SESSION["ActiveUserSessio ...

Is there a way to incorporate cell highlighting on IE?

I've implemented a method to highlight selected cells based on the suggestion from jointjs. It surrounds the cell with a 2-pixel red border, which works well in Chrome. However, I need the outline to work in IE as well. Unfortunately, when I reviewed ...

Combining Mongoose OR conditions with ObjectIDs

After querying my Team schema, I am receiving an array of ids which I have confirmed is correct. The issue seems to lie in the fact that both home_team and away_team are ObjectIDs for the Team Schema within my OR statement. Team.find({ 'conferenc ...

The flex container cannot contain all of the content due to an

I am looking to implement a flexbox dropdown menu similar to this: After researching online, I found a simple dropdown menu example. However, I want to customize it using flexbox and its properties. The issue I encountered is that the flexbox container do ...

A tutorial on submitting multipart/form-data using JavaScript

I am currently facing an issue with the uploadImage API in my frontend. I am using input[type='file'] to obtain image data from users and then POSTing it to my API. In the backend, I am parsing this data using formidable. However, the problem ari ...