jQuery Validate

by cristianromagnoli

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.0/additional-methods.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
      <label for="name">Name (required, at least 2 characters)</label>
      <input id="name" name="name" minlength="2" type="text" required/>
      <label for="email">E-Mail (required)</label>
      <input id="email" type="email" name="email" required/>
      <label for="url">URL (optional)</label>
      <input id="url" type="url" name="url"/>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
      <label for="sel">Your sel (required)</label>
      <select id="sel" class="required"><option value="">dgdfggf</option><option value="fggfgf">dgdfggfgfggf</option></select>
          <input type="file" name="pic" class="required" />
      <input class="submit" type="submit" value="Submit"/>
  </fieldset>
</form>

CSS

body{font-family: arial; font-size: 13px;}
label{margin-top:10px;}
label, input, textarea{display: block}
.error{margin:0;color: red;}

JavaScript

$("#commentForm").validate({
    rules: {
        pic: {
            required: true,
            extension: "pdf|doc|docx"
        }
    }
});