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

发布于 2025-01-02 23:59:38 字数 1539 浏览 1 评论 0原文

我正在尝试在 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 验证绑定到具有特殊类名的每个表单。

原文

I'm trying to create a custom validation method in JQuery and I can't manage to make it work properly.

Here is what I want to do :

<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>

If the user selects the master bedroom location to be upstairs (see second select), the number of stories for the house should be superior or equal to 2 (which is logical since the master bedroom can't be upstairs if there is only one story).

To do so I try to add a custom method to my JQuery validator :

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

I'm not sure how to get the value of another element in the form, I tried the JQuery old fashion way but it doesn't seem to work.

For additional information, I add the custom method in a global javascript files, in a function that binds the JQuery validation to every forms that have a special class name.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

涙—继续流 2025-01-09 23:59:38

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

这是新方法：

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

I managed to make it work.
It looks like the Jquery selector
$("#fld-stories")
works properly.
For some reason I don't know, the method works if I invert the way I do my check and return a true instead of a false.

Here is the new method :

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

回复收藏 0 原文

梦里寻她 2025-01-09 23:59:38

我稍微改进了我的代码。
这是新方法：

$.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 "Upstairs" for a one–story home');

我希望这可以帮助别人。

I improved my code a little bit.
Here is the new method :

$.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 "Upstairs" for a one–story home');

I hope this can help somebody.

回复收藏 0 原文

~没有更多了~