Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 439
  • Last Modified:

jQuery-Validation-Engine-> validating slider position

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 an anti-spam measure, please drag the slider below to the right 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>

Open in new window

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

Open in new window


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

Open in new window

0
EddieShipman
Asked:
EddieShipman
  • 2
1 Solution
 
EddieShipmanAuthor Commented:
Ok, finally figured it out. Posting for others to see.

After the slider is initialized, I need to bind the anchor's blur to my validation function:
$("#slider").children("a").bind("blur", sliderCheck);

Open in new window

Then I show the Prompt on the slider div:
function sliderCheck() {
    if($("#CommentSlider").val() != 1) {
        $('#slider').validationEngine('showPrompt', 'Please move the slider to the right before submitting the form');
    }
}

Open in new window

0
 
EddieShipmanAuthor Commented:
For others to see.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now