Parsley validation - Make one required for a else generate error

Question

I'm using the 'sortable' jQuery UI function and have two <ul> elements which work fine to pass <li> elements inbetween. I'd like Parsley to generate an error if the first <ul id="assignees"> is empty when the form is submitted via a standard form post:

<form method="POST" id="createaccountform" name="createaccountform" action="create-new-task-do.php" class="textleft inputform" parsley-validate novalidate>

I've added 'required' to the first <ul> but this doesn't generate the error when submitted with no <li>.

FIRST SORTABLE UL: <ul id="assignees" class="connectedSortable" required></ul>

SECOND SORTABLE UL: <ul id="allmarketing" class="connectedSortable"> <li class="ui-state-default"><input type="hidden" value="3" />Monica</li> </ul>

I've added an empty placeholder <li required> in the first <ul> but that doesn't generate the error either.

I'm thinking that I may need to count the number of <li> elements in the <ul> with a custom Parsley rule but am unclear as to how to do that.

Thanks.

Answer 1

Parsley will, by default, only consider inputs, not <li> and other types of fields, so your required attribute will be completely ignored.

So you could consider adding a <input type="hidden" required> in your <li>, but that's not actually the validation you want.

I don't think there's a simple way to achieving what you want to do, even with Parsley.

You could customize the inputs setting to add your <ul>, so the required attribute could be used, and use the parsley:field:validate event to calculate the current value. Set it to '' if there's no <li> and to true or similar if there is one.

Answer 2

Solution using a simple jQuery click event which looks to see if the ul has a child <li> (if($("#assignees li").length==0)). If length is equal to zero, display a hidden div which displays an error message and set the submit flag to false. Then check to see if the normal Parsley validation (for the rest of the form fields) is false. If false, set the submit flag to false. Finally, check to see if the submit flag is true. If true, submit the form ($("#createaccountform")[0].submit();). The [0] parameter is required since jQuery won't override the default submit action for the form with just the submit() function alone (SO Article - Form Submit jQuery does not work).

//validate my form with Parsley
//and check of ul has at least one li
$("#mysubmit").click(function()
{   
    var mysubmitok = true;
    //check if assignees ul has at least one li
    if($("#assignees li").length==0)
    {
        //false - display error message div
        $("#missingassignee").css("display","block");
        //set submit flag to false
        mysubmitok = false;
    }

    //check for Parsley validation result on rest of form fields
    if(false === $("#createaccountform").parsley().validate())
    {
        //if false - set submit flag to false
        mysubmitok = false;
    }

    //submit form via jQuery if no validation errors
    //for either Parsley validated fields or
    //the check for li members of the ul
    //requires [0] parameter to override default form submit event
    if(mysubmitok)
    {
        $("#createaccountform")[0].submit();
    }
});

HTML -
<form method="POST" id="createaccountform" name="createaccountform"  action="create-new-task-do.php" class="textleft inputform" data-parsley-validate novalidate>
    ...<input elements>...
    <input type="button" id="mysubmit" name="mysubmit" class="mybutton tallbutton" value="Create" />
</form>