jQuery 基于元素选择的验证条件

Question

我的表单和验证表单上有以下输入元素 jQuery 验证插件。

HTML:

<form name='frmUsers' id='frmUsers' method='post' action='#'>
    <div>
        <input type='text' name='name' id='name' placeholder='Name' />
    </div>
    <br />
    <div>
        <input type='text' name='fixed_budget' id='fixed_budget' placeholder='Fixed budget' />
    </div>
    <br />
    <div>
        <select name='budget' id='budget'>
            <option value=''>Select your budget</option>
            <option value='1000'>1000</option>
            <option value='2000'>2000</option>
            <option value='3000'>3000</option>
            <option value='4000'>4000</option>
        </select>
    </div>
    <br/>
    <div>
        <input id='save' type='submit' value='Save' />
    </div>
</form>

jQuery 验证：

$(document).ready(function () {

    $("#frmUsers").validate({
        onkeyup: false,
        onfocusout: false,
        ignore: [],
        rules: {
            "name": {
                required: true
            },
                "fixed_budget": {
                required: true
            },
                "budget": {
                required: true
            }
        },
        messages: {
            "name": {
                required: 'required'
            },
                "first_name": {
                required: 'required'
            },
                "last_name": {
                required: 'required'
            }
        },
        errorPlacement: function (error, element) {

        },
        submitHandler: function () {
            return false;
        }
    });

});

现在所有元素都是必填字段，但我在 Fixed budget (text box) and budget (select box) 上有特定条件。

例如：

当用户点击提交时，fixed budget 和 budget 元素显示错误，但是 (1) 当用户 select budget 上的任何选项时，设置固定预算字段不需要。 (2) 当用户在 fixed budget 上输入内容时，将预算字段设置为不需要。

这是我的工作 JSFiddle：http://jsfiddle.net/mananpatel/85KR4/384/

有什么想法吗？

谢谢。

Answer 1

(1) when user select any option on budget, set fixed budget field to not required. (2) when user input something on fixed budget set budget field to not required.

换句话说，您只需要填写这两个字段之一。

包括 the additional-methods.js file and use the require_from_group method.

rules: {
    name: {
        required: true
    },
    fixed_budget: {
        require_from_group: [1, ".requiredGroup"]
    },
    budget: {
        require_from_group: [1, ".requiredGroup"]
    }
},

演示：http://jsfiddle.net/7om97gk8/

注：

如果要禁止显示消息，请在 errorPlacement 函数中使用 return false。不要将函数留空，因为那是草率的编码。
```
errorPlacement: function (error, element) {
   return false;
},
```
此外，请使用最新版本的插件文件，因为这将确保 require_from_group 方法运行无错误。
我不明白你为什么在完全禁止显示这些消息的情况下使用 messages 选项。在这种情况下，您可以安全地删除 messages。

jQuery 基于元素选择的验证条件

jQuery validation condition based on elements selection

javascript

jquery

jquery-validate

HTML:

jQuery 验证：

例如：