title: Jquery validate - needing at least 1 of 2 fields populated with anything other than default text
body: <p>I have an html contact form which has default values in each field - ie. "First name" (wherein I'm using <a href="http://labs.thesedays.com/projects/jquery/clearfield/" rel="nofollow">clearfield.js</a> so that the values disappear when the user clicks)</p>
  
  <p>I have 2 fields which <em>must</em> be filled in, and 2 fields where <em>either</em> of which must be filled in. Of course, all fields are already recognised as being filled in as they all have default values. I've worked my way around this by using validator.addMethod to ignore the default phrases.</p>
  
  <p>I've also managed to tweak the validation to allow at least 1 of 2 fields to be filled in using validator.addMethod, but <em>only</em> when I take out the default values.</p>
  
  <p>My problem occurs when I have the default values present <em>and</em> I wish to have at least 1 of 2 fields filled in. I can't figure out how to have the validation recognise when/if at least one field has a unique non-default value.</p>
  
  <p>I've included my code below.</p>
  
  <p>I'm no expert in jquery/javascript, so hopefully there's a simple solution out there.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
      $(document).ready(function() {
  
          jQuery.validator.addMethod("notEqual", function(value, element, param) {
            return this.optional(element) || value != param;
          }, "This field is required.");
  
          jQuery.validator.addMethod("require_from_group", function (value, element, options) {
              var numberRequired = options[0];
              var selector = options[1];
              var fields = $(selector, element.form);
              var filled_fields = fields.filter(function () {
                  return $(this).val() != "";
  
              });
              var empty_fields = fields.not(filled_fields);
              if (filled_fields.length &lt; numberRequired &amp;&amp; empty_fields[0] == element) {
                  return false;
              }
              return true;
          }, jQuery.format("Please enter either a phone number or email address."));
  
  
        $("#contact-form").validate({
          groups: {
              names: "phone email"
          },         
          rules: {
            fname: {
              required: true,
              notEqual: "First name*"
              }, 
            lname: {
              required: true,
              notEqual: "Last name*"
              },
            phone: {
              require_from_group: [1, ".phoneEmail"]
              },
            email: {
              require_from_group: [1, ".phoneEmail"]
              },
          }
  
          });
  
      });
  
      jQuery.extend(jQuery.validator.messages, {
          require_from_group: jQuery.format("'Please enter either username/ email address to recover password'/Please fill out at least {0} of these fields.")
      });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;form id="contact-form" method="post" action="contact-submitted.php" &gt;          
          &lt;input type="text" class="clearField" name="fname" id="fnameField" value="First name*" /&gt;
          &lt;input type="text" class="clearField" name="lname" id="lnameField" value="Last name*" /&gt;
          &lt;input type="text" class="hidden" name="subject" id="subjectField" /&gt;
          &lt;input type="text" class="clearField phoneEmail" name="phone" id="phoneField" value="Phone number*" /&gt;
          &lt;input type="text" class="clearField phoneEmail" name="email" id="emailField" value="Email" /&gt;
          &lt;textarea name="message" class="clearField" id="messageField"&gt;Your message&lt;/textarea&gt;
          &lt;span class="required-field"&gt;*required field&lt;/span&gt;
          &lt;input type="submit" id="contact-submit" value="Start planning now" /&gt;
      &lt;/form&gt;
  </code></pre>