jQuery validation condition based on elements selection

Question

I have following input elements on my form and and validation form with jQuery validation plugin.

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

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

});

Now all elements are required fields but I have specific condition on Fixed budget (text box) and budget (select box).

For example:

When user click on submit, fixed budget and budget elements display with errors but (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.

Here is my working JSFiddle: http://jsfiddle.net/mananpatel/85KR4/384/

Any Idea?

Thanks.

BTW, you do not need a click handler or a conditional to see if the form exists. The plugin automatically captures the click and jQuery automatically ignores the code if the selector element does not exist. jsfiddle.net/85KR4/385 — Sparky
– Sparky, Commented Oct 21, 2015 at 17:03

Sparky · Accepted Answer · 2015-10-21 22:03:44Z

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

In other words, you only require one of those two fields filled out.

Include 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"]
    }
},

DEMO: http://jsfiddle.net/7om97gk8/

Note:

Use return false within the errorPlacement function if you want to suppress messages. Don't leave the function empty, as that's sloppy coding.
```
errorPlacement: function (error, element) {
   return false;
},
```
Also, use the latest version of the plugin file as this will ensure the require_from_group method operates bug-free.
I don't understand why you are using the messages option when you've totally disabled these messages from displaying. You can safely remove messages in this case.

Collectives™ on Stack Overflow

jQuery validation condition based on elements selection

HTML:

jQuery validation:

For example:

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML:

jQuery validation:

For example:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related