Question

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

我已尝试将验证放在隐藏字段和滑块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>

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

Answer 1

我想出了如何发布，以便其他人看到。

初始化滑块后，需要将锚点的模糊绑定到验证函数：

$("#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');
    }
}

jQuery的验证 - 引擎 - ＆GT;验证滑块位置

1 个答案: