2014-03-04 50 views
1

我無法使用此插件對滑塊進行驗證,任何人都可以在此幫忙嗎?jQuery-Validation-Engine->驗證滑塊位置

我試過把隱藏字段和滑塊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; 
    }  

回答

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