I cannot make a slider validate using this plugin, Can anyone help out here?

I've tried putting the validation on the hidden field and on the slider div but it won't validate in either case.

HTML:

As a security measure, please drag the slider below to the right, or use 
the right arrow on the keyboard, until the color changes.<span class="required" 
id="slider_required">(required)</span>
<input type="hidden" name="CSlider" id="CSlider" value="0" />
<br />
<div id="slider" class="validate[required,funcCall[sliderCheck]]"></div>

Javacript:

$(document).ready(function () {
    $("#slider").slider({
        value: 0,
        min: 0,
        max: 1,
        step: 1,
        slide: function (event, ui) {
            $("#CSlider").val(ui.value);
            // Don't need the color change for the thumb
            if (ui.value == 1) {
                $("#slider").children("a").css("background", "#48B");
                $("#slider").css("background", "#F7F6F1");
            } else {
                $("#slider").children("a").css("background", "#F7F6F1");
                $("#slider").css("background", "#F7F6F1");
            }
        }
    });
});

function sliderCheck(field, rules, i, options) {
    if(field.val() != 1) {
        return options.allrules.validate2field.alertText;
    }
}

CSS:

#slider {
    display:inline-block;
    background-position:left top;
    background-repeat:repeat-x;
    border:1px solid #ccc;
    float:left;
    margin-left: 25px;
    padding:0;
    width:120px;
    }    
有帮助吗?

解决方案

I figured out how, posting this for others to see.

After the slider is initialized, need to bind the anchor's blur to the validation function:

$("#slider").children("a").bind("blur", sliderCheck);

Then show the Prompt on the slider div:

function sliderCheck() {
    if($("#CSlider").val() != 1) {
        $('#slider').validationEngine('showPrompt', 'Please move the slider to the right before submitting the form');
    }
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top