title: Chosen with Jquery validator show error with the chosen search text box
body: <p>In my project I am using <code>chosen</code> dropdown with <code>Jquery validator</code>. I added <code>ignore: []</code> in the validation function. Now the issue is, </p>
  
  <p><strong>the validator validating the search text box with in the chosen plugin and showing the below error in the debug</strong></p>
  
  <p><a href="https://i.stack.imgur.com/SYFhj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SYFhj.png" alt="enter image description here"></a>  </p>
  
  <p><strong>In my page, there are 3 chosen select as showing in the below image</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Bw1VR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Bw1VR.png" alt="enter image description here"></a></p>
  
  <p>The above error is showing for the text field showing below <strong>Which is automatically generated by the chosen plugin and it don't have a name</strong></p>
  
  <p><a href="https://i.stack.imgur.com/SDIae.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SDIae.png" alt="enter image description here"></a></p>
  
  <p>The sample code which I am using for validation is</p>
  
  <pre><code>function validateUserForm() {
  $('#user-master-form').validate({
      debug: true,
      ignore: [],
      rules: {
          first_name: {
              required: true,
              minlength: 3,
              maxlength: 100
          },
          last_name: {
              maxlength: 100
          },
          email: {
              required: true,
              email: true
          },
          mobile: {
              required: true,
              number: true,
              maxlength: 15,
              minlength: 10
          },
          date_of_birth: {
              required: true
          },
          gender: {
              required: true
          },
          address: {
              required: true,
              maxlength: 200
          },
          state: {
              required: true
          },
          district: {
              required: true
          }
      },
      messages: {
          first_name: {
              required: "Please enter first name",
              minlength: jQuery.validator.format("At least {0} characters required!"),
              maxlength: jQuery.validator.format("Up to {0} characters allowed!")
          },
          last_name: {
              maxlength: jQuery.validator.format("Up to {0} characters allowed!")
          },
          email: {
              required: "Please enter email id",
              email: 'Invalid email format',
          },
          mobile: {
              required: "Please enter mobile",
              number: 'Only numbers allowed',
              minlength: jQuery.validator.format("At least {0} numbers required!"),
              maxlength: jQuery.validator.format("Up to {0} numbers allowed!")
          },
          date_of_birth: {
              required: "Please enter date of birth"
          },
          gender: {
              required: "Please select gender"
          },
          address: {
              required: "Please enter address",
              maxlength: jQuery.validator.format("Up to {0} characters allowed!")
          },
          state: {
              required: "Please select state"
          },
          district: {
              required: "Please select district"
          }
      },
      errorPlacement: function (error, element) {
          if (element.hasClass("chosen")) {
              var id = element.attr('id');
              error.insertAfter("#" + id + "_chosen");
          }
          else if (element.parent('.vd_radio').length) {
              error.insertAfter(element.parent());
          }
          else {
              error.insertAfter(element);
          }
      }
  });
  }
  </code></pre>
  
  <p>Please help me to get rid of this issue. I am stuck on here. Any help could be appreciated</p>