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

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

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

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

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

Answer 2

你的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验证工作......

验证规则只能使用.validate()属性在name方法中声明，而不是id 。您在calander方法中使用.validate()，但根据您的JSON，calander是id的{{1}}。在此方法中，您应该使用select，这似乎已定义为overlay2的{{1}}。 （FWIW，你还拼写错误＆＃34;日历＆＃34; as＆＃34; calander＆＃34;为你的name。）
您尚未在select内声明任何规则。规则使用id选项声明，自定义消息使用.validate()选项声明。您无法在rules内声明规则，反之亦然。

否则，只要您messages中的第一个messages包含option，select规则就会按预期运行。

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

工作代码：

value=""

DEMO：http://jsfiddle.net/4195L9e8/

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

2 个答案: