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

我的表单和带有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）当用户在budget上选择任何选项时，请将固定预算字段设置为不需要。（2）当用户在fixed budget上输入内容时，将预算字段设置为不需要。

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

任何想法？

谢谢。

最佳答案

（1）当用户选择预算中的任何选项时，将固定预算字段设置为不需要。（2）当用户在固定预算上输入内容时，将预算字段设置为不需要。

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

包括the additional-methods.js file并使用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/

注意：

如果要禁止显示消息，请在return false函数中使用errorPlacement。不要将函数留空，因为这是草率的编码。

errorPlacement: function (error, element) {
   return false;
},

另外，请使用最新版本的插件文件，因为这将确保require_from_group方法无错误运行。
我不明白为什么完全禁用了显示这些消息后为什么使用messages选项。在这种情况下，您可以安全地删除messages。

Budget

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