jquery - 使用 jQuery Validate 验证单个元素时指定验证消息

Question

当我在单个元素上使用 jQuery 验证时，如何更改验证消息。

在下面的示例中，我只是尝试在单击按钮时验证“DestinationId”选择列表。

$(".process").click(function () {
    return $("form[action$='process']").validate({
        rules: {
            DestinationId: "required"
        },
        messages: {
            DestinationId: "Please provide the destination"
        }
    }).element("#DestinationId");
});

这是 select 元素的渲染 HTML：

<select class="required" id="DestinationId" name="DestinationId"
   <option value="">Select Destination</option>
   <option value="3">Europe</option>
   <option value="4">USA</option>
</select>

然而出现的消息只是：“此字段是必需的”。

我哪里错了？

Answer 1

参考现场演示

我尝试了这种方式并按预期工作正常。检查您是否以不同的方式尝试过。

HTML：

<form action="process">
    <select class="required" id="DestinationId" name="DestinationId">
        <option value="">Select Destination</option>    
        <option value="3">Europe</option>    
        <option value="4">USA</option> 
    </select><br/>
    <button class="process">Submit</button>
</form>

查询：

$(".process").click(function () {     
    return $("form[action$='process']").validate({         
        rules: {             
            DestinationId: "required"         
        },         
        messages: {             
            DestinationId: "Please provide the destination"         
        }     
    }).element("#DestinationId"); 
});

编辑：

正如@Jasper Mogg提到的，不关闭选择标签可能是个问题。

替换此行

<select class="required" id="DestinationId" name="DestinationId"

对此

<select class="required" id="DestinationId" name="DestinationId">