Jquery Validation Plugin,使用选项的数据元素作为检查验证

时间:2014-12-24 16:32:00

标签: javascript jquery jquery-validate

我正在寻找一种方法让JQuery验证插件检查所选选项的数据元素的值,以确定选择是有效还是无效。无效选项需要包含在选择中的原因主要用于显示目的。即如果我选择的问题是“你的房子是什么颜色的?”我有“红色”,“蓝色”,“绿色”选项,最终用户需要明确显示“绿色”不是一个有效的选择。

现在我正在使用'验证'来处理其他所有内容,但我必须在一个单独的函数中编写以检查这些字段,并且我希望能够只使用'验证'来完成所有操作。

以下是我正在寻找的更详细的例子:

HTML:

<html>
<head>
<script type="text/javascript" src="./js/jquery-validate-1.11.1.min.js"></script>
<script type="text/javascript">

$(document).ready( function() {

    // BASIC VALIDATION
    // Set Validator Defaults and rules
    $.validator.setDefaults({
        errorPlacement: function(error, element) {  
            $(element).attr({"title": error.append()});
        },
        highlight: function(element){
            $(element).addClass("error");
        },
        unhighlight: function(element){
            $(element).removeClass("error");
        }
    });
    $("#myform").validate({
        rules: {
            email: {
                required: true,
                email: true
            },
            myselect: {
                // HOW DO I DEFINE THIS RULE SO THAT 
                // IF OPTION 3 IS SELECTED THIS RETURNS
                // INVALID
            }
        }   
    });
});
</script>
</head>    
<body>
<form id='myform' name='myform'>
    <input type='text' id='email' name='email value='' />
    <select id='myselect' name='myselect'>
        <option id='1' data-is_valid='1'>Option 1</option>
        <option id='2' data-is_valid='1'>Option 2</option>
        <option id='3' data-is_valid='0'>Option 3</option>
        <option id='4' data-is_valid='1'>Option 4</option>
    </select>
</form>

2 个答案:

答案 0 :(得分:0)

引用OP

  

“我必须在一个单独的函数中编写以检查这些字段,并且我希望能够只使用validate来完成所有操作。”

可以使用the .addMethod() method来包装您的单独功能并将其转换为规则。


但是,如果您花时间解释为什么要将select限制为某些选项,那么当您已经控制了select在{可能会建议第一名,更好的答案或解决方法。 (这是在OP满意后很长时间内使其他人受益的一种方式

答案 1 :(得分:0)

以下是我最终解决问题的方法: 谢谢你给Sparky指出我正确的方向

jQuery.validator.addMethod("valid_option", function(value, element) {
    if ($(":selected", element).data('is_valid') == "1") {
        return true;
    }
    return false;
}, "&nbsp&nbspError, Invalid Selection");