title: Jquery Mobile Validation error position & selects
body: <p>I added bassistance jQuery validation to a form on my jQuery Mobile project. It works perfect, except for the errors show up inside the text inputs and not below them. I know I could use errorPlacement to use divs below my inputs to output my error messages, but this doesn't seem to work for select menus.</p>
  
  <p>So I have 2 questions:</p>
  
  <ol>
  <li>Is there something I can do different to make the error messages show up below the inputs without using errorPlacement?</li>
  <li>How can I get error messages to show up for select menus if I have to use errorPlacement?</li>
  </ol>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script&gt;
      $('#page').bind('pageinit', function(event) {
          $('#registrationForm').validate({
              rules: {
                  firstname: {
                      required: true
                  },
                  lastname: {
                      required: true
                  },
                  email: {
                      required: true,
                      email: true,
                      remote: "duplicateCheck.php"
                  },
                  password: {
                      required: true,
                      minlength: 5
                  },
                  verify_password: {
                      required: true,
                      minlength: 5,
                      equalTo: "#password"
                  },
                  handicap: {
                      required: true,
                      maxlength: 2,
                      digits: true
                  },
                  stopper: {
                      required: true
                  }
              },
              messages: {
                  firstname: {
                      required: "Please enter your first name."
                  },
                  lastname: {
                      required: "Please enter your last name."
                  },
                  email: {
                      required: "Please enter your email.",
                      email: "Please enter a valid email.",
                  },
                  password: {
                      required: "Please enter a password.",
                      minlength: "You password must be at least 5 characters long."
                  },
                  verify_password: {
                      required: "Please enter a password.",
                      minlength: "You password must be at least 5 characters long.",
                      equalTo: "You passwords did not match."
                  },
                  handicap: {
                      required: "Please enter your handicap.",
                      maxlength: "Your max handicap can't be higher than 99.",
                      digits: "Please only enter numbers."
                  },
                  stopper: {
                      required: "Please enter the word above."
                  }
              },
              errorPlacement: function(error, element) {
                  error.appendTo( element.parent().next() );
              }
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is my error css:</p>
  
  <pre><code>label.error {
      color: red;
      font-size: 16px;
      font-weight: normal;
      line-height: 1.4;
      margin-top: 0.5em;
      width: 100%;
      float: none;
  }
  
  @media screen and (orientation: portrait){
      label.error {
          margin-left: 0;
          display: block;
      }
  }
  
  @media screen and (orientation: landscape){
      label.error {
          display: inline-block;
          margin-left: 22%;
      }
  }
  </code></pre>