jqueryasp.netformsparsley.jsmultiple-forms

Validating only one form on an ASP.net page using Parsley.js


I have a slightly tricky problem that I've been stuck on for the last few hours.

I'm current working with an ASP.net page that requires one form tag wrapper around the entire page. Within that form are two separate forms with their respective submit buttons.

I'm trying to find a way to validate (using parsley.js) just one form when it's respective submit but is clicked but at the moment it's validating both.

Does anyone have any ideas on how I can do this? I know there's a parsley-data-group way of doing it but I don't full understand how to execute it. Any help would be greatly appreciated.

http://jsfiddle.net/zkomy34o/2/ - Fiddle here

<form>
    <div class="form1">
        <input type="text"/>
        <input type="text"/>
        <input type="submit" value="submit"/>
    </div>
    <div class="form2">
        <input type="text"/>
        <input type="text"/>
        <input type="submit" value="submit"/>
    </div>
</form>

Solution

  • You should be able to do this with groups.

    jsFiddle

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

    And then some jquery

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