CODEWITHSUNDEEP
javascriptparsley.js
Salma Hamed
Salma Hamed

Reputation: 2068

data-mincheck parsley not working

I am using parsley.js to validate my form. When trying to validate my checkbox by using data-mincheck, noting happens.

here is my code snippet:

<form data-validate="parsley">
    <p>Pick atleast 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>

Upvotes: 1

Views: 1552

Answers (1)

Panade
Panade

Reputation: 289

On the Parsley.js Website it says, he only uses the parsley-namespace for his values. I evaluated this quickly with the current version of Parsley.js. Its seems that it doesnt work anymore with data- attributes, however this is what i got out of you code to get it working:

 <form action="success.html" parsley-validate method="post">
    <p>Pick atleast 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>

Make sure you add Jquery before Parsley. I simply added the now recommendet Parsley attributes like "parsley-validate" on the Form and "parsley-group" and "parsley-mincheck" for the Field. The "parsley-group" always has to be the same for each Checkbox to be affected. But isnt limited to the "name" attribute.

Hope this helps.

Upvotes: 1

Related Questions