validation in dynamic Form with options required (jQuery)?

Question

I'm trying to make a form where "offer" is chosen, and if "rent" option is chosen, then it makes the "flatrent" required, but if "sale" is chosen then it makes the "saleflat" required. I don´t know how to do this.

I'm using the jQuery Form Plugin.

       <form id="item" name="item" method="post" action="">                            
        <fieldset>
        <h3>Type</h3> 
        <label for="property_type">offer</label>  
        <div class="input">
        <select id="property_type" name="property_type">    
        <option selected="selected" value="">Select your offer</option>
        <option value="rent">rent</option>
        <option value="sale">sale</option>
        </select>
        </div>
        </fieldset>

        <fieldset class="rent clearfix hide">
          <label for="requiered by rent">show + requiered by rent</label> 
          <select id="rentflat" name="rentflat">
          <option selected="selected" value="">Select</option>
          <option value="1">condition 1</option>
          <option value="2">condition 2</option>
          </select>
        </fieldset>

        <fieldset class="sale clearfix hide">
          <label for="requiered by sale">show requiered by sale</label> 
          <select id="saleflat" name="saleflat">
          <option selected="selected" value="">Select</option>
          <option value="1">condition 1</option>
          <option value="2">condition 2</option>
          </select>
        </fieldset>

        <button type="submit" class="btn">inserieren</button>

      </form>

my validation script

      $(document).ready(function () {
          $("#item").validate({
              rules: {
                  property_type: {
                      required: true,
                      rentflat: {
                          depends: function () {
                              return $('#item select[name="property_type"]').val() === 'rent';
                          }
                      },
                      saleflat: {
                          depends: function () {
                              return $('#item select[name="property_type"]').val() === 'sale';
                          }
                      }
                  },
                  messages: {
                      property_type: "offer is required!",
                      rentflat: "rentflat is required!",
                      saleflat: "saleflat is required!"
                  }

              }
          });
      });  

an life example is here jsbin

Answer 1

Your nesting syntax is all bungled up.

Your code with my comments:

rules: {
    property_type: {
        required: true,
        rentflat: {  // <-- does not go inside of 'property_type'
            // depends function belongs inside of a rule
            depends: function () {
                return $('#item select[name="property_type"]').val() === 'rent';
            }
        },
        saleflat: {  // <-- does not go inside of 'property_type'
            // depends function belongs inside of a rule
            depends: function () {  
                return $('#item select[name="property_type"]').val() === 'sale';
            }
        }
    },
    messages: {  // <-- does not go inside of 'rules' option
        property_type: "offer is required!",
        rentflat: "rentflat is required!",
        saleflat: "saleflat is required!"
    }

}

1) You've incorrectly put messages inside of rules. They are siblings.

2) You've incorrectly put the rentflat and saleflat field:rule declarations inside of the property_type field:rule declaration. Again, all field:rule declarations are siblings of each other so you cannot put one inside of another.

3) Your depends function is correct. However, you did not assign the depends function to a rule. Your depends function needs to be the value of (inside of) the required rule declaration.

The fixed version:

// this is the 'rules' option
rules: {    
    property_type: {      // <-- field name
        required: true    // <-- rules
    },
    rentflat: {           // <-- field name
        required: {       // <-- rules
            // depends function inside of 'required' rule
            depends: function () {  
                return $('#item select[name="property_type"]').val() === 'rent';

            }
        }
    },
    saleflat: {           // <-- field name
        required: {       // <-- rules
            // depends function inside of 'required' rule
            depends: function () { 
                return $('#item select[name="property_type"]').val() === 'sale';
            }
        }
    }
},

// this is the 'messages' option, sibling of 'rules' option    
messages: {  
    property_type: "offer is required!",
    rentflat: "rentflat is required!",
    saleflat: "saleflat is required!"
}

Working version: http://jsfiddle.net/knLXp/