jQuery Required Star Plugin Demo

Example

Code

$(function() {
  $('input, textarea').requiredStar();

  // You can specify the requiredClass and validClass.
  // $('input, textarea').requiredStar({ requiredClass: 'required', validClass: 'valid' });
});

Markup

<form action="#" method="get">
  <fieldset>
    <p>
      <label for="name-field">Name (Required)</label>
      <input id="name-field" name="name" type="text" class="required" />
    </p>

    <p>
      <label for="email-field">E-mail (Not Required)</label>
      <input id="email-field" name="email" type="text" />
    </p>

    <p>
      <label for="age-field">Age (Required)</label>
      <input id="age-field" name="age" type="text" value="20" class="required" />
    </p>

    <p>
      <label for="comment-field">Comment (Required)</label>
      <textarea name="comment" class="required"></textarea>
    </p>
  </fieldset>
</form>

Style

input[type=text].required, input[type=password].required, textarea.required {
    background: white url(required_star.png) no-repeat 100% 50%;
}

textarea.required {
    background-position: 100% 0;
}

input[type=text].valid, input[type=password].valid, textarea.valid {
    background-image: none;
}