jQuery-Validation-Engine-> 验证滑块位置答案

【问题标题】：jQuery-Validation-Engine-> validating slider positionjQuery-Validation-Engine-> 验证滑块位置
【发布时间】：2014-03-04 17:04:47
【问题描述】：

我无法使用此插件验证滑块，有人可以帮忙吗？

我尝试将验证放在隐藏字段和滑块 div 上，但在这两种情况下都不会验证。

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>

Java脚本：

$(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;
    }

【问题讨论】：

标签： jquery jquery-validation-engine

【解决方案1】：

我想通了，把这个贴出来给别人看看。

滑块初始化后，需要将anchor的blur绑定到验证函数：

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

然后在滑块 div 上显示提示：

function sliderCheck() {
    if($("#CSlider").val() != 1) {
        $('#slider').validationEngine('showPrompt', 'Please move the slider to the right before submitting the form');
    }
}

【讨论】：