Conditional Required Fields validation is not working

Question

I've got a new enigma for you to solve, because I can't manage to get this working.

Imagine yourself working for an online marketing company with a proprietary platform to host and manage campaigns. And then imagine only being able to validate required fields that 'just are there'. And at last; imagine a client that needs form fields to be required after a certain radio button is checked. Right? Right! Well.... no... not right.

Here is the thing. That same radio button triggers a jQuery script that eases in the 5 div 's with form fields that are hidden display: block . I have the jQuery.validation.js plugin at the ready.

I insert this piece of code to the form fields that are required if it meets the condition that the depending field is checked:

class="textInput1 validate[condRequired[radiobuttonX]]" 

textInput1 is a CSS class that styles an input field.

As a submitbutton I use an image which uses this code to submit: input type="image"

onclick="document.forms['formName'].submit();"

I have got:

$(document).ready(function() {

in place and in my head I have the link to the validation script:

<script src="../path/to/jquery.validationEngine.js"></script>

I use the: Inline Form Validation Engine 2.6.2, jQuery plugin

How do I make form field Y required when radiobuttonX is ticked? I definitely need syntax as well, because I'm a dumbs ;-)

Answer 1

If you can switch fromjQuery Validation Engine to jQuery-Validate, this would be the solution:

$("#form").validate({
    rules: {
        fieldY: {
            required: {
                depends: function() {
                    return $("#radioButtonX").is(":checked");
                }
            }
        }
    }
});