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

Generating a Personalized XML Format Using Information from a Single MySQL Table Row by Row

If anyone can assist with this, I would greatly appreciate it: <warehouse> <frontbay> </frontbay> <bayrow> <bay> </bay> <bay> ...

phpjavascriptmysqlxml

Tips for preventing FormLabel components from turning blue when a radio button is selected

Currently, I am working on a Reactjs project that utilizes Material Ui components. In this project, I am tasked with creating a form to generate a new event where users can select the event location type from three options - In-Person, Hybrid, and Virtual ...

javascriptreactjsformsmaterial-uicrud

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

After running the `npm run build` command in a Svelte (not Svelte Kit) application, the index.html file displays as

When I run the npm run dev server, it displays the default counter app that is built. However, if I build a plain HTML, CSS, and JavaScript project using npm run build in the dist folder, then open the index.html file, it shows a blank page even though the ...

javascriptnpmsvelte

Updating parameter value upon the execution of an internal function in Javascript

How can I log the text from a textbox to the console when a button is clicked in this code snippet? <body> <input type="text" id="ttb_text" /> <script type="text/javascript"> function AppendButton() { var _text = ''; ...

javascriptjqueryfunction

Deleting the v-stepper-header number with Vuetify

I have been searching everywhere in an attempt to resolve this issue, but I have not been able to find a solution. Is there a way to remove the numbers from the v-stepper-header? - Using Vuetify version: 1.5.6 Current: https://i.stack.imgur.com/gLxFX.png ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Guide on how to use JavaScript to make an HTML5 input field mandatory

I am facing an issue with setting input fields as required based on radio button selection in a form. Initially, all fields should have required=false, but I'm unable to achieve this. No matter what value I assign to the required attribute, it always ...

javascripthtmlrequired

Guide on accessing a local image while setting the background image using JavaScript

I am trying to set a background image from a local source on my computer. Below are two lines of code, one that works and one that does not: (the local one fails) _html.style.backgroundImage = 'url("urlsourceblahblahblah")'; _html.style.backgro ...

javascripthtmlcssangularjsimage

Retrieve the parent document for every item within a Firebase collection group

Transitioning from an SQL background to document storage, I am currently navigating through a Firebase database structure that looks like this: John (doc) Restaurant Reviews (collection) Review 1 (doc) Review 2 (doc) Paul (doc) Restaurant Reviews ...

javascriptangularfirebasegoogle-cloud-firestore

Sending PHP variable to xmlhttp.responseText

I haven't come across this specific situation before, so I thought I would ask for help. My JavaScript code is using AJAX to call a PHP file, run the script in it, and then return a concatenated PHP variable via xmlhttp.responseText to alert that resp ...

phpjavascriptajaxxmlhttprequest

The quirks of JSON.stringify's behavior

I am in the process of gathering values to send back to an ASP.NET MVC controller action. Despite using JSON.stringify, I keep encountering Invalid JSON primitive exceptions and I am unsure why. I have a search value container named searchValues. When I i ...

javascriptjqueryajaxasp.net-mvckendo-grid

Comparison between on() delegation and delegate()

When using <strong>$(document).on('click', '#target')</strong> versus <strong>$('body').delegate('click', '#target');</strong> It seems like both options achieve the desired outcome ...

javascriptjqueryevents

What are the techniques for integrating PHP code into JavaScript/Ajax?

I am curious about how to integrate PHP code into JavaScript/Ajax. Here is the PHP code I am working with: if ($folder = opendir('data/Tasklist/')) { while (false !== ($file = readdir($folder))) { if ($file != '.' && $ ...

javascriptphpjqueryajax

The navigation bar is positioned with white space above it

Currently working on a website design and facing an issue with adding a clickable button to the Nav-bar. Noticed some white-space above the Nav-bar which is not desired. I had previously posted a similar question but unable to identify the CSS error causi ...

javascripthtmlcss

Tips for locating the index of the previously selected active class

I am currently working on a slider and have made progress up to this point. However, I am facing an issue where I cannot proceed because I need to identify the index of the item from which I removed the last active class before the click event occurs. My ...

javascriptcsssliderclickstyles

javascript dynamic content remains unaffected by ajax call

I'm a beginner with javascript and I am using a PHP variable to create links dynamically. Here is an example of how the variable is set: $addlink = '<button class="blueBtn btnSmall" id="current'.$product_id.'" onClick=addcart(' ...

javascriptphpajax

The Concept of Interface Segregation Principle within jQuery

Could someone provide a clear explanation of how this function operates using jQuery? Especially in reference to the response found here. It seems similar to the Single Responsibility Principle (SRP) in Object-Oriented Programming. What sets it apart? ...

javascriptjquerydesign-principlesinterface-segregation-principle

Developing typeScript code that can be easily translated and optimized for various web browsers

Can TypeScript alleviate the worry of having to use code such as this (especially when considering browsers like IE that may not support indexOf)? arrValues.indexOf('Sam') > -1 Does the transpiling process in TypeScript generate JavaScript c ...

javascripttypescriptinternet-explorer

Master the art of using useMutation from react-query: Learn how to handle error messages and success notifications effectively!

Currently in my Next.js project, I have integrated react-query to retrieve data from MongoDB. Within my form, a POST request is sent using the useMutation hook: /*** components ***/ import {Button, InputGroup} from "../index"; import {useMutatio ...

javascriptreactjsnext.jsreact-query

Restrict the maximum and minimum time that can be entered in an HTML input

I've implemented a basic code feature that allows users to input minutes and seconds on my React website. <div> <span> <input defaultValue="0" maxlength="2"/> </span> <span>m</span> <spa ...

javascripthtmlreactjsinput