Custom Validation for Jquery UI Selectable

Question

I have the following code that makes the

for(somecollection){
    <ol id="someId@(index)" class="selectableList">
       <li value="1">1</li>
       <li value="2">2</li>
       <li value="3">3</li>
    </ol>
}

IN javascript section:

$(".selectableList").selectable(
            {
                stop: function (event, ui) {
                    $(".ui-selected:first", this).each(function () {
                        $(this).siblings().removeClass("ui-selected");
                        var refreshVal = $(this).attr("value");
                        var cid = $(this).attr("id");
                        SetValue(@(Model.Id),refreshVal, cid);
                    });
                }
            }
        );

$("#positionCultureForm").on("submit", function () {
        if (!$(this).valid()) {
            return false;
        }
    });

I am not sure how to set up the Validation for this so that when the form is submited it checks to see if atleast one of the item is ui-selected.

Edited: I need the validation to be individual for each of items in the collection.

Edited: Custom Validation:

jQuery.validator.messages.required = "";

    $.validator.addMethod("isOneSelected", function (value, element, arg) {
        return false;
    }, 'test');


    $("#someForm").validate();

    $("#someForm").on("submit", function () {
        if (!$(this).valid()) {
            return false;
        }
    });

In Html:

<ol id="someId@(index)" class="selectableList isOneSelected">

Gil Zumbrunnen · Accepted Answer · 2012-08-14 18:30:45Z

1

After applying .selectable() your ol will look similar to this one :

<ol id="someId@(index)" class="selectableList ui-selectable">
<li class="ui-widget-content ui-selectee">Item 1</li>
<li class="ui-widget-content ui-selectee">Item 2</li>
<li class="ui-widget-content ui-selectee">Item 3</li>
<li class="ui-widget-content ui-selectee ui-selected">Item 4</li>
<li class="ui-widget-content ui-selectee">Item 5</li>
<li class="ui-widget-content ui-selectee">Item 6</li>
<li class="ui-widget-content ui-selectee">Item 7</li>
</ol>

From there you can see the class .ui-selected appeared, to find out how many are selected, simply create a selector and use .length to get how many items it returns.

if($("#someId@(index) .ui-selected").length){} // if 1 or more are selected

If you need to do something in particular for each of them, you can always loop through it.

$("#someId@(index) .ui-selected").each(function()
{
    // your validation
}

In your code you seem to be removing this class with .removeClass("ui-selected"); You can then simply $(this).addClass("foo") and make your selectors with .foo

answered Aug 14, 2012 at 18:30

Gil Zumbrunnen

1,0626 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

jmogera Over a year ago

Please looked at the updated code I put in. Apologizes for not including it earlier in the post.

Gil Zumbrunnen Over a year ago

Are you asking how to do the same with the plugin jquery-validator? I never used it but it seems to be only a matter of setting it up in your isOneSelected method and call it on submit. To validate a form is quiet easy by hand, especially if you start using jQuery UI widgets, if you do not use it anywhere else I'd advise to keep your code plugin-free.

jmogera Over a year ago

Yeah I trying to do with the jquery-validator plugin.

Nal Over a year ago

@jmogera looking at what everyone is saying, all you have to do is return $("#someId@(index) .ui-selected").length == 1 in the isOneSelected validation method.

Collectives™ on Stack Overflow

Custom Validation for Jquery UI Selectable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related