문제

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