Question

validate for my Form, I’ve included a snippet of the html and coding. For my Profile Type I use a show/hide piece of coding to display another div if value 2 is selected in Profile Type. What I need to happen here is for the jquery.validate to only validate div id="pro2"‘s form elements IF its shown, and if not then don’t show an error for it not being complete.

Questions is how do I do this?

<script type="text/javascript">
$(document).ready(function() {
    function showDiv(element, pro2) {
        if (pro2.children("option:selected").val() == 2) element.show();
        else element.hide();
    }
    var myElement = $("div#pro2");
    var mypro2 = $("select#ptype");
    $("select").change(function() {
        showDiv(myElement, mypro2)
    });
    $("#ctry").change(function() {
      $(".state").hide();
      var stateSelect = $("#state_" + $(this).val());
      stateSelect.show();      
    });
    $("input[data-code]").each(function() {
      $(this).autocomplete("/js/zip/" + $(this).data("code") + ".php", {
      matchContains: true, matchFirst: true, mustMatch: false,
      selectFirst: false, cacheLength: 10, minChars: 1, autofill: false,
      scrollHeight: 150, width: 180, max: 20, scroll: true
      });
    });
    $("#form1").validate({
        errorLabelContainer: $("#form1 div.error")
    });     
   // $("#reg_form").validate();    
});
</script>

HTML Code:

<div class="error"></div>    
<label>Profile Type:</label>
          <select name="add[type]" id="ptype" 
          title="Select Profile Type!" class="{validate:{required:true}}">
            <option value="">-- Select</option>
            <option value="2">(MF/FF/MM)</option>
            <option value="1">F or M</option>
          </select>


    <div id="pro1">        
            <label>First Name:</label> 
            <input type="text" name="add[name]" size="20" maxlength="15" id="fname" 
            title="Your First Name" class="{required:true,minlength:1}"/>
            <span class="rsmall">internal use not displayed</span><br />
    </div>
    <div id="pro2">
            <label>First Name:</label>
            <input type="text" name="cpl[name]" size="20" maxlength="15" id="fname" 
            title="Your First Name" class="{required:true,minlength:1}"/>
            <span class="rsmall">internal use not displayed</span><br />
    </div>

Answer 1

Actually this should work. jquery.validate ignores all hidden fields by default (if you want to customize this behavior, it has an option “ignore” which is set to “:hidden” by default).

Ther are two odd things in your code, your input fields use the same id “fname”, and instead of class="{required:true,minlength:1}" it should be class="required" minlength="1". At least in the jquery.validate plugin I am using. Maybe you are using a different plugin or older version?