title: Form validation in conjunction with hidden fields
body: <p>Good day. Thanks to great assistance from Derek and Ross I have managed to put together a form with a validation option. The specific thing about this is that the page contains 3 forms which from only one is displayed depending of the drop-down list. Everything seems to be working perfectly apart from one thing. I can't submit the form because on the other 2 hidden forms there contain unfilled fields. How can I overcome this issue? I think it's a matter of adding to jquery a part which will ignore the hidden elements during validation process. But unfortunately I don't know how to do this.The code below:</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;select id='selector'&gt;
      &lt;option value='opt1' id="opt1"&gt;Quote Request&lt;/option&gt;
      &lt;option value='opt2' id="opt2"&gt;General Enquiry&lt;/option&gt;
      &lt;option value='opt3' id="opt3"&gt;Feedback&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;form action="" method="post" id="form1" class="form" action="scripts/form-quote.php"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;input id="name" name="name" type="text" placeholder="Name" class="required"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="email"&gt;E-mail&lt;/label&gt;
                  &lt;input id="email" name="email" type="text" placeholder="E-mail" class="required"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="msg"&gt;Message&lt;/label&gt;
                  &lt;textarea id="msg" name="msg" cols="43" rows="8" placeholder="Please specify your requirements" class="required"&gt;&lt;/textarea&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="ad"&gt;Referrer&lt;/label&gt;
                  &lt;input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="submit" class="submit"&gt;Request a quote&lt;/button&gt;
  
  &lt;/form&gt;
  
  &lt;form action="" method="post" id="form2" class="form" action="scripts/form-general.php"&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;input id="name" name="name" type="text" placeholder="Name" class="required"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="email"&gt;E-mail&lt;/label&gt;
                  &lt;input id="email" name="email" type="text" placeholder="E-mail" class="required"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="msg"&gt;Message&lt;/label&gt;
                  &lt;textarea id="msg" name="msg" cols="43" rows="8" placeholder="Please enter your message" class="required"&gt;&lt;/textarea&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="ad"&gt;Referrer&lt;/label&gt;
                  &lt;input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="submit" class="submit"&gt;Send your message&lt;/button&gt;
  
  &lt;/form&gt;
  
  &lt;form action="" method="post" id="form3" class="form" action="scripts/form-feedback.php"&gt;
  
          &lt;select&gt;
              &lt;option value='General feedback'&gt;General feedback&lt;/option&gt;
              &lt;option value='Website feedback'&gt;Website feedback &lt;/option&gt;
              &lt;option value='Services feedback'&gt;Provided services feedback&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;label for="name"&gt;Name&lt;/label&gt;
                  &lt;input id="name" name="name" type="text" placeholder="Name" class="required"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="email"&gt;E-mail&lt;/label&gt;
                  &lt;input id="email" name="email" type="text" placeholder="E-mail" class="required"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="msg"&gt;Message&lt;/label&gt;
                  &lt;textarea id="msg" name="msg" cols="43" rows="8" placeholder="Your feedback" class="required"&gt;&lt;/textarea&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;label for="ad"&gt;Referrer&lt;/label&gt;
                  &lt;input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" /&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="submit" class="submit"&gt;Send your feedback&lt;/button&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code> $(function () {
  var addErrorMessage = function (field) {
          var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
          field.addClass('err').after(err);
      },
      clearError = function () {
          var t = $(this);
          if (t.hasClass('err')) {
              t.removeClass('err');
              t.next('p').empty().remove();
          }
      },
      isEmpty = function (str) {
          return str.trim().length &lt; 1;
      },
      isValidEmail = function (str) {
          var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
          return regexp.test(str);
      },
      validateForm = function () {
          var requiredFields = $(this).find('.required'),
              email = $('#email'),
              fieldsValidate = true;
  
          // check that required fields are not empty
          requiredFields.each(function () {
              var t = $(this);
              if (isEmpty(t.val())) {
                  fieldsValidate = false;
                  if (!t.hasClass('err')) {
                      addErrorMessage(t);
                  }
              }
          });
  
          // check that email is valid
          if (!isValidEmail(email.val().trim())) {
              fieldsValidate = false;
              if (!email.hasClass('err')) {
                  addErrorMessage(email);
              }
          }
          return fieldsValidate;
      };
  
  $('input, textarea').keyup(clearError);
  $('#form1').submit(validateForm);
  
  
  
  
  var $select = $("#selector");
  $select.change(function () {
      if ($('#selector option:selected').attr("id") == "opt1") {
          if ($('#form1').is(":hidden")) {
              $('#form1').fadeIn(500);
          }
          $('#form2').hide();
          $('#form3').hide();
      }
      if ($('#selector option:selected').attr("id") == "opt2") {
          if ($('#form2').is(":hidden")) {
              $('#form2').fadeIn(500);
          }
          $('#form1').hide();
          $('#form3').hide();
      }
      if ($('#selector option:selected').attr("id") == "opt3") {
          if ($('#form3').is(":hidden")) {
              $('#form3').fadeIn(500);
          }
          $('#form1').hide();
          $('#form2').hide();
      }
  });
  });
  </code></pre>
  
  <p>And the jsFiddle <a href="http://jsfiddle.net/tucado/9LRMr/1/" rel="nofollow">here</a></p>