Question

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;
    }    
Was it helpful?

Solution

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');
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top