CODEWITHSUNDEEP
javascriptparsley.js
Pirlo
Pirlo

Reputation: 81

It is not working on data-parsley-mincheck="2" with Parsley.js-2.0.0-rc4

When I check my form, it show 'Y' in console. But I did not select any checkbox.
In official document, it say:

checkbox need to have either a name or an id attribute to be correctly binded and validated by Parsley. Otherwise, they would be ignored and a warning will be put in the console.

I had set 'name' attribute in input tag and parsley also did not show:

To be binded by Parsley, a radio, a checkbox and a multiple select input must have either a name, and id or a multiple option.

But it still not work on data-parsley-mincheck="2".

In other situation, the same code is work on parsley-mincheck="2" with parsly version 1.2.3.

So, if I have any mistake with the official document (parsly 2.0.0-rc4).

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script src="jquery-1.11.0.min.js"></script>
        <script src="parsley.min.js"></script>
        <script>
            function checkMyForm(myform) {
                if($(myform).parsley().validate()) {
                    console.info('Y');
                } else {
                    console.error('N');
                }
            }
        </script>
    </head>

    <body>
        <form name="myform" action="" method="post" novalidate onsubmit="return false;">
            <div>
                <input name="mybox" type="checkbox" value="1" 
                        data-parsley-multiple="mytest"
                        data-parsley-mincheck="2" />&nbsp;Value-1&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="2" data-parsley-multiple="mytest"/>&nbsp;Value-2&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="3" data-parsley-multiple="mytest"/>&nbsp;Value-3&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="4" data-parsley-multiple="mytest"/>&nbsp;Value-4&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="5" data-parsley-multiple="mytest"/>&nbsp;Value-5&nbsp;&nbsp;
            </div>
            <!-- <div style="padding: 10px 0px;">
                <input name="mytext" type="text" data-parsley-required="true"/>
            </div> -->
            <a href="javascript: checkMyForm(document.myform);">Test Checkbox</a>
        </form>
    </body>
</html>

I find some similar question about it:
How can I get Parsley.js to oupt 1 error for a group of radio buttons or checkboxes?

I try to change my data-parsley-mincheck="2" to the last checkbox and add required attribute.
When I check my form again, it also return 'Y' (But I did not select any checkbox).
Thus, it is not the key point on the problem.

Upvotes: 3

Views: 7298

Answers (1)

Pirlo
Pirlo

Reputation: 81

At 2014/3/24, I find the example of official document (Parsley.js) was updated.
So, I download the Parsley again from the GitHub, and edit my code according the example:

http://parsleyjs.org/doc/examples/simple.html

Like:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="jquery-1.11.0.min.js"></script>
        <script src="parsley.js"></script>
        <script>
            function checkMyForm(myform) {
                if($(myform).parsley().validate()) {
                    console.info('Y');
                } else {
                    console.error('N');
                }
            }
        </script>
    </head>

    <body>
        <form name="myform" id="myform" data-parsley-validate>
            <!-- <p>
                <input name="myradio" type="radio" value="1" data-parsley-required="true"/>&nbsp;Value-1&nbsp;&nbsp;
                <input name="myradio" type="radio" value="2"/>&nbsp;Value-2&nbsp;&nbsp;
            </p> -->
            <div>
                <input name="mybox" type="checkbox" value="1" data-parsley-required="true" data-parsley-mincheck="2"/>&nbsp;Value-1&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="2"/>&nbsp;Value-2&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="3"/>&nbsp;Value-3&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="4"/>&nbsp;Value-4&nbsp;&nbsp;
                <input name="mybox" type="checkbox" value="5"/>&nbsp;Value-5&nbsp;&nbsp;
            </div>
            <a href="javascript: checkMyForm(document.myform);">Test Checkbox</a>
            <!-- <div style="background-color: gray; width:200px;" onclick="checkMyForm();">Test</div> -->
        </form>
    </body>
</html>

Though I dose not know the difference not yet. But it is working now.
So, I think it is time to update parsley from 1.2.3 to 2.0.0 rc4.

Upvotes: 5

Related Questions