JQuery添加验证方法来验证表单中的另一个元素

时间:2012-02-06 19:19:27

标签: jquery validation jquery-validate

我正在尝试在JQuery中创建自定义验证方法,但我无法使其正常工作。

这是我想要做的:

<div class="row">
    <label for="fld-stories">Stories</label>
    <select id="fld-stories" class="valid" name="stories" title="">
        <option value="">--</option>
        <option value="1" label="1">1</option>
        <option value="2" label="2">2</option>
        <option value="3" label="3">3</option>
        <option value="4" label="4">4</option>
        <option value="5" label="5">5</option>
    </select>
</div>

<div id="row_master_bedroom_location" class="row">
    <label for="fld-master_bedroom_location">Master Bedroom Location</label>
    <select id="fld-master_bedroom_location" name="master_bedroom_location" title="">
        <option value="up">Upstairs</option>
        <option value="down">Downstairs</option>
    </select>
</div>

如果用户选择主卧室位置在楼上(见第二个选择),房子的故事数应该高于或等于2(这是合乎逻辑的,因为主卧室不能在楼上,如果有的话只有一个故事。)

为此,我尝试向我的JQuery验证器添加自定义方法:

$.validator.addMethod('masterBedroomLocation', function(value, element, params) {
    if (value == 'up' && $("#fld-stories").val() < 2){
        return false;
    }
}, 'You cannot select &quot;Upstairs&quot; for a one&ndash;story home');     

我不确定如何获取表单中另一个元素的值,我尝试了JQuery旧时尚方式,但它似乎不起作用。

有关其他信息,我将自定义方法添加到全局javascript文件中,该函数将JQuery验证绑定到具有特殊类名的每个表单。

2 个答案:

答案 0 :(得分:0)

我设法让它发挥作用。 它看起来像Jquery选择器     $( “#FLD-故事”) 工作正常。 出于某些原因我不知道,如果我按照我的检查方式反转并返回true而不是false,则该方法有效。

以下是新方法:

$.validator.addMethod('masterBedroomLocation', function(value, element, params) {
    if (value == 'up' && $("#fld-stories").val() >= 2){ 
        return true;
    }
}, 'You cannot select &quot;Upstairs&quot; for a one&ndash;story home'); 

答案 1 :(得分:0)

我改进了我的代码。 这是新方法:

$.validator.addMethod('masterBedroomLocation', function(value, element, params) {
    if($('#fld-master_bedroom_location').val() == 'down'){
        return true;
    }
    else if($('#fld-master_bedroom_location').val() == 'up' && $("#fld-stories").val() >= 2){
        return true;
    }else{
        return false;
    }
}, 'You cannot select &quot;Upstairs&quot; for a one&ndash;story home');

我希望这可以帮助别人。