title: Jquery validate required based on another field's input and target field's input
body: <p>How can I make an input field required IF another field is not filled out OR if the target field IS filled out?</p>
  
  <p>I have two fields for height...inches and feet.  I would like to make the fields required based on each other.  I was able to get the Require to work with a function </p>
  
  <pre><code>"user[height][inches]":{
      required: function(element) {
         return (!$("input[name='user[height][feet]']").hasClass('valid'));
      },
  </code></pre>
  
  <p>I did the same for feet and that worked well.  The next step I needed was a range validation but only if the field is required or if it is not required but is filled in anyway.  I was able to get that to work with the Depends </p>
  
  <pre><code>range: {
     param: [1, 120],
     depends: function(element) {
     // if feet is not filled out then require inches range
     if (!$("input[name='user[height][feet]']").hasClass('valid')){
        return true;
     // else if feet is filled out and inches is not blank or 0 then require range
     } else if ( $("input[name='user[height][inches]']").val() != "" &amp;&amp; $("input[name='user[height][inches]']").val() != "0" ) {
        return true;
     // else feet is filled out and inches is blank or 0 so do not require range
     }  else {
        return false;
     }
  </code></pre>
  
  <p>I can't seem to get the Number requirement to work with this though.  It only works one the FIRST validation but when the user tries again with a non-number it accepts it.</p>
  
  <pre><code>        number: function(element){
              // if feet is not filled out then require number input
              if (!$("input[name='user[height][feet]']").hasClass('valid')){
                return true;
                // else if feet is filled out and inches is not blank
              } else if ( $("input[name='user[height][inches]']").val() != "" ) {
                return true;
                // else feet is filled out and inches is blank so do not require
              }  else {
                return false;
              }
          }
  </code></pre>
  
  <p>I also tried...</p>
  
  <pre><code>        number: {
              depends: function(event){
                 // if feet is not filled out then require number input
                 if (!$("input[name='user[height][feet]']").hasClass('valid')){
                   return true;
                // else if feet is filled out and inches is not blank
                 } else if ( $("input[name='user[height][inches]']").val() != "" ) {
                   return true;
                // else feet is filled out and inches is blank so do not require
                 }  else {
                   return false;
                 }
               }
             }
  </code></pre>
  
  <p>My field forms are </p>
  
  <pre><code>&lt;input type="number" name="user[height][inches]" placeholder="11"/&gt; 
  &lt;input type="number" name="user[height][feet]" placeholder="4"/&gt; 
  </code></pre>
  
  <p>I noticed that if I debug during the validation that when I am calling $("input[name='user[height][inches]']").val() that it returns "" even if the input value is "string", I believe this is because it does not pass validation but I also think it ruins my logic.</p>
  
  <p>Another problem might be that initially it is checking if the feet field hasClass "valid" and it returns false but then it seems like after initially being false, it is then set to validated once the the inches field is filled out and then ruins the validation logic on the 2nd attempt.</p>
  
  <p>Here is my JFiddle but I had trouble duplicating since it is validating for a number correctly without even including that validation requirement... <a href="http://jsfiddle.net/sza51q6s/1/" rel="nofollow">http://jsfiddle.net/sza51q6s/1/</a></p>
  
  <p>I might have to reevaluate my logic entirely.  How can I make the target field required only if the other field is NOT filled out OR if the current field IS filled out?</p>