How to validate only selected fields using parsley js

Question

I'm using parsley js in two forms in a single page. i want to trigger parsley validator when i click on a type='button' field and validate the first form to check only 3 fields of the form. Initially there are around 7 fields in the form included for validation. So far I couldn't make it work. tried this but no luck.

any idea?

update: this is my code;

<div class = 'two'>
    <input type='text' id='firstname' name='firstname' />
</div>
$('#form').parsley({
    excluded: '.two input'
});
$('#form').parsley('validate');

i just tried to exclude one field and test if the form is validating as i want it to be. But still it validates input field inside css class 'two'. that's all i have done so far. no clue..

Solution 1

You have a couple of issues with your code, specifically with this line:

<dir classs = 'two'>

that should be

<div class = 'two'>

That is, you have dir instead of div and classs instead of class. You should also use $('#form').parsley().validate() instead of $('#form').parsley('validate').

The following code will work:

<form method='post' id='form'>
    <div class = 'two'>
        <input type='text' id='firstname' name='firstname' required />
    </div>
    <div>
        <input type='text' id='thisisrequired' name='thisisrequired' required />
    </div>
    <button type="button" id="submit-form">Submit</button>
</form>

<script>
    $(document).ready(function() {
        $('#form').parsley({
            excluded: '.two input'
        });

        $("#submit-form").on('click', function() {
            $('#form').parsley().validate();
            if ($('#form').parsley().isValid()) {
                console.log('valid');
            } else {
                console.log('not valid');
            }
        });
    });
</script>

You can view a more complete working example in this jsfiddle

---

For your case, you should consider using data-parsley-group (see the docs) to achieve the same result, with the following code:

<form method='post' id='form'>
    <div>
        <input type='text' id='firstname' name='firstname' data-parsley-group="first" 
            required />
    </div>
    <div>
        <input type='text' id='thisisrequired' name='thisisrequired' 
            data-parsley-group="second" required />
    </div>
    <button type="button" id="submit-form">Submit</button>
</form>

<script>
    $(document).ready(function() {
        $('#form').parsley();

        $("#submit-form").on('click', function() {
            $('#form').parsley().validate("second");
            if ($('#form').parsley().isValid()) {
                console.log('valid');
            } else {
                console.log('not valid');
            }
        });
    });
</script>

The difference between the two, is that in the first example you redefine the excludedoption. In the second example you would use data-parsley-group and validate only that group.

For a complete example, visit this jsfiddle (you can test it and change $('#form').parsley().validate("second"); to $('#form').parsley().validate("first"); to see what happens).

Solution 2

just an add on to the answer above, to work correctly , use group name in isValid too,ie $('#form').parsley().isValid("second")).

<script>
    $(document).ready(function() {
        $('#form').parsley();

        $("#submit-form").on('click', function() {
            $('#form').parsley().validate("second");
            if ($('#form').parsley().isValid(**"second"**)) {
                console.log('valid');
            } else {
                console.log('not valid');
            }
        });
    });
</script>