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

Question

我的表单和带有 jQ​​uery 验证插件的验证表单上有以下输入元素。

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;
        }
    });

});

现在所有元素都是必填字段，但我对固定预算(文本框)和预算(选择框)有特定条件。

例如:

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

这是我的工作 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并使用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/

注意:

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

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

2. 此外，请使用最新版本的插件文件，因为这将确保 require_from_group 方法运行时不会出现错误。

3. 我不明白当您完全禁止显示这些消息时，为什么还要使用消息选项。在这种情况下，您可以安全地删除消息。