Issue with Parsley validation not functioning as expected

I have implemented parsley.js to validate my form, but I am facing an issue when trying to validate a checkbox using the data-mincheck attribute.

Below is the snippet of my code:

<form data-validate="parsley">
    <p>Please choose at least 2 items:</p> 
    <div id="custom-salad">
        <div class="sub-step">
            <p>Base:</p>
            <div class="checkbox"> 
                <label class="checkbox-custom"> 
                    <input type="checkbox" data-group="salad-dish" name="salad-custom" data-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta 
                </label> 
            </div> 
            <div class="checkbox"> 
                <label class="checkbox-custom"> 
                    <input type="checkbox" data-group="salad-dish" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage 
                </label>
            </div>
        </div>
    </div>
</form>
javascriptparsley.js

Answer №1

According to the Parsley.js Website, only the parsley-namespace is used for values. After evaluating the current version of Parsley.js, it seems that data- attributes no longer work. Here is what I found from your code in order to make it function:

<form action="success.html" parsley-validate method="post">
    <p>Pick at least 2 items:</p>
    <div id="custom-salad">
        <div class="sub-step">
            <p>Base:</p>
            <div class="checkbox"> 
                <label class="checkbox-custom"> 
                    <input type="checkbox" parsley-group="salad-test" name="salad-custom" parsley-mincheck="2" value="pasta"> <i class="icon-unchecked"></i> Pasta 
                </label> 
            </div> 
            <div class="checkbox"> 
                <label class="checkbox-custom"> 
                    <input type="checkbox" parsley-group="salad-test" name="salad-custom" value="Cabage"> <i class="icon-unchecked"></i> Cabage 
                </label>
            </div>
        </div>
    </div>
    <input type="submit" value="Senden"> </input>
</form>

Remember to include jQuery before Parsley. I added the recommended Parsley attributes like "parsley-validate" on the Form and "parsley-group" and "parsley-mincheck" for the Field. The "parsley-group" should be consistent for each Checkbox affected but is not limited to the "name" attribute.

I hope this information proves helpful.

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

"Discover the Step-by-Step Guide to Launching Fresh Content or Code in the Current Tab and

I have a webpage with multiple tabs, each representing different content. Now, I want to create a functionality where if a user clicks on the "Home" tab, they are prompted to enter a password (e.g., 1234). Upon entering the correct password, the user shoul ...

javascripthtml

Tips for accessing Ajax data within Ember computed property

I'm facing a challenge with returning data from an Ajax call in a computed property. Despite being aware of the asynchronous nature, I am unable to figure out how to do it due to the specific requirement of returning the data in an array format with o ...

javascriptjqueryajaxember.js

I am confused by the combined output of the Array method and join function in JavaScript

In my JavaScript code, I declared the myArr variable in the following way: var myArr= Array(3); Upon logging the value of myArr, I received the output: [undefined × 3] Next, I utilized the JavaScript join function with the code snippet: myArr.join(&a ...

javascriptarraysfunction

Obtain an array from an Ajax request using jQuery Datatables

I have integrated the jQuery DataTables Select plugin into my project to enable the selection of multiple rows from a table and storing their data inside an array. Subsequently, I am attempting to make an Ajax Request to pass this array to another PHP file ...

javascriptphpjqueryajaxdatatables

Image not showing up on HTML page following navigation integration

Having trouble with my responsive website setup - the background image for ".hero-image" isn't showing up after adding the navigation. Google Chrome console is throwing a "Failed to load resource: the server responded with a status of 404 (Not Found)" ...

javascripthtmlcss

Load a page and sprinkle some contents with a slide effect

I am brand new to jQuery and just starting out, so please excuse me if this question seems basic or silly. I would like the header and footer of my page to stay in place while the center content slides in from the right side when the page loads. This websi ...

javascriptjqueryhtmlcss

Dynamic HTML Table with Ajax Click Event Trigger

I have implemented an HTML table that refreshes automatically every 5 seconds and contains some buttons. The issue I am facing is that the event only triggers before the initial refresh. <?php require_once ('UserTableHtm ...

javascriptphphtmlajax

How does the AngularJS Dependency Injection system determine the names of the arguments it needs to inject?

Here is an example directly from the official website: function PhoneListCtrl ($scope, $http) { $http.get('phones/phones.json').success(function(data) { $scope.phones = data; }); $scope.orderProp = 'age'; } The $s ...

javascriptdependency-injectionangularjs

How to change a value within an array stored in local storage using Vanilla JavaScript?

I recently started learning vanilla JavaScript and followed a tutorial on creating a shopping cart. While the tutorial was helpful, it was cut short and I had to figure out how to update a value in a local storage array by clicking a button on my own. Can ...

javascriptjson

What is the best way to insert a YouTube video into a WordPress template page?

I decided to create a new template page for one of the pages on my WordPress site because I only wanted to have some text and a YouTube video displayed. It turns out that embedding a YouTube video directly into the code is not supported by WordPress, so I ...

javascripthtmlwordpressyoutube

Is there a way for me to connect the ajax data to Vue components?

Utilizing Jquery ajax to load data from an external API has been successful and the v-for text is also working without any issues. Vue var vm = new Vue({ el:'.inlinePoetry', data:{ PoetryList:[] }, created:function(){ var ...

javascriptajaxvue.js

Issue with Ag-Grid's getRowClass not locating the appropriate CSS styling

I am facing a simple challenge at the moment. My goal is to dynamically change the background color of my rows, with the intention of incorporating this feature when expanding or contracting groups. Currently, I am attempting to utilize gridOptions.getRow ...

javascriptcssvue.jsag-grid

I'm experiencing a problem when trying to add a document to Firebase Firestore using React Native - it doesn't seem to

I'm currently working on a React Native project that utilizes Firebase v9. My goal is to add a user object to my user collection whenever a new user signs up through the sign-up screen. However, I've encountered an issue where the user object is ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Use ng-repeat to extract information from an array and populate it into a datalist

I've already tried searching for a solution to my issue on Google, but I couldn't find anything that really helped me. I'm looking to create an input field that also functions like a dropdown. This way, I can either type in my own data or se ...

javascriptangularjsangularjs-ng-repeathtml-datalist

Avoiding data type conversion in JavaScript/TypeScript

Currently delving into the world of JavaScript, I come from a background of working with statically typed languages. Naturally, I opted to dive into TypeScript instead of starting directly with JS. While TypeScript is great and addresses many issues presen ...

javascripttypescriptcasting

Javascript's event.keyCode does not capture the Backspace or Delete keys in Internet Explorer

Looking to detect when the Backspace and Delete keys are pressed using javascript/jQuery, I have the following code: $("textarea[name=txt]").keypress(function(e){ var keycode = e.keyCode ? e.keyCode : e.which; if(keycode == 8){ // backspace ...

javascriptjqueryinternet-explorerkeypress

Jquery code that mimics pressing a key downwards is not functioning properly to execute a keyboard shortcut

I would like to express my gratitude in advance for any time and effort dedicated to this matter. So, here's the situation: I have a script that is meant to simulate a key press event after 3 seconds once the page is loaded. The goal was to trigger a ...

javascriptjquerykeyboard-shortcutskeypresssimulate

The IntroJs step is only partially visible on the screen

Currently, I am incorporating introJS into my application and encountering an issue where one of the steps is only partially visible on the screen. Despite trying various position settings such as auto, left, right, etc., this particular item consistentl ...

javascripthtmlcssionic-frameworkintro.js

The radio button that disables other inputs only functions correctly for a single element when using Query Selector, but does not work with Query

I have attempted to develop a form section that is disabled when the user selects option A and enabled when they choose option B. document.getElementById('delivery').onclick = function() { var disabled = document.querySelectorAll(".dis ...

javascripthtml

Wrap every character in a span tag within this text

Extracting search strings from an object obj[item].coveredText and replacing each character with a span is what I aim to achieve. Currently, I can only replace the entire search string with a single span element. Any suggestions would be greatly appreciat ...

javascriptjquery