使用 jQuery Validate 插件验证 JSON 生成的下拉列表

Question

尝试使用 jQuery Validate 来验证下拉菜单。表单数据是使用 JSON 生成的。我可以在输入字段中添加“必填”，但似乎无法通过下拉菜单执行此操作。以下是我所拥有的，但它似乎不起作用。

有没有办法添加一个动作来确保用户选择一个选项？

JSON：

[
    {
        "caption": "Starting Calander Options",
        "name": "overlay2",
        "type": "select",
        "id": "calander",
        "options": {
            "": "none",
            "calendar13": "January 2015",
            "calendar14": "February 2015",
            "calendar15": "March 2015",
            "calendar16": "April 2015",
            "calendar17": "May 2015",
            "calendar18": "June 2015",
            "calendar19": "July 2015",
            "calendar20": "August 2015",
            "calendar21": "September 2015",
            "calendar22": "October 2015",
            "calendar23": "November 2015",
            "calendar24": "December 2015"
        }
    },
]

jquery：

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<script type="text/javascript">
    var jqnew = jQuery.noConflict();

    jqnew("#stringForm").validate({
        messages: {
            calander: {
                required: "Please select an option from the list, if none are appropriate please select 'Other'",
            },
        }
    });
</script>

HTML：

<div class="leftArea">
    <form id="stringForm"> 
        <input type="hidden" value="" name="id" id="id"/>
        <input type="hidden" id="new-profile" name="newprofile" value="yes"/>
        <input type="hidden" id="text-name" name="text_name" value=""/>
    </form>

    <?php //echo $this->getChildHtml("customization_radio") ?>
    <?php echo $this->getChild("customization_radio") -> setProduct($product)->toHtml() ?>
</div>

另外作为说明，我使用的是 Magento 框架 7

Answer 1

你的 JSON...

"caption": "Starting Calander Options",
"name": "overlay2",
"type": "select",
"id": "calander",
"options": {
    "": "none",
    "calendar13": "January 2015",
    ....
}

你的 jQuery...

jqnew("#stringForm").validate({
    messages: {
        calander: {
            required: "Please select an option from the list, if none are appropriate please select 'Other'",
        },
    }
});

这里有两个关键问题阻止 required 验证工作...

1. 验证规则只能在.validate() 方法中声明使用name 属性，而不是id。您在.validate() 方法中使用calander，但根据您的JSON，calander 是您的select 的id。在此方法中，您应该使用overlay2，这似乎是您定义为select 的name。 （FWIW，您还把 id 的“日历”拼错为“日历”。）

2. 您根本没有在.validate() 中声明任何规则。使用rules 选项声明规则，使用messages 选项声明自定义消息。您不能在 messages 中声明规则，反之亦然。

否则，只要您的select 中的第一个option 包含您已经拥有的value=""，required 规则就会按预期工作。

您还应该将 jQuery 代码包含在 DOM 就绪事件处理程序中，以确保在调用方法之前完全构建 HTML。

工作代码：

<script type="text/javascript">
    jQuery(document).ready(function(jqnew) { // ensure DOM is ready

        jqnew("#stringForm").validate({
            rules: {         // <- declare your rules
                overlay2: {  // <- the NAME attribute
                    required: true
                }
            },
            messages: {      // <- define your custom messages
                overlay2: {  // <- the NAME attribute
                    required: "Please select an option from the list, if none are appropriate please select 'Other'"
                }
            }
        });

    });
</script>

演示：http://jsfiddle.net/4195L9e8/

Answer 2

编辑：不知何故，我错过了原始问题中的“jQuery Validate”参考。不过，我会继续留下我的答案，作为一种验证方法，供人们搜索简单的 jQuery 验证（或对任何一种方法都灵活）并找到这个问题。

---

您想要执行的 jQuery 检查是使用 .val() 方法对下拉列表的值进行简单检查。

如果要确保用户选择了一个值，请检查以确保下拉列表的当前值不等于默认选项的值（即"": "none",设置的值）：

if ($("#DROPDOWN_ID_VAL").val() !== "") {
    // logic for when it passes validation
}
else {
    // logic for when it DOES NOT pass validation
}