0

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

4

1 回答 1

1

你的嵌套语法都搞砸了。

你的代码和我的评论：

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）您错误地messages将rules. 他们是兄弟姐妹。

2）您错误地将rentflatand saleflatfield:rule 声明放在property_typefield:rule 声明中。同样，所有 field:rule 声明都是彼此的兄弟，因此您不能将一个放在另一个里面。

3）你的depends功能是正确的。但是，您没有将depends函数分配给规则。您的depends函数必须是规则声明（内部）的值。required

固定版本：

// 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!"
}

工作版本：http: //jsfiddle.net/knLXp/

于 2013-11-04T16:58:14.907 回答