Material Design Styled Text Fields with jQuery and CSS3

A tiny jQuery plugin that adds cool CSS3 powered user interaction effects to your form fields, following the Google Material Design specification. Works with jzaefferer's jQuery validation plugin to provide client-side visual input validation.

How to use it:

1. Load the needed jQuery library and the jQuery validation plugin in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.validate.min.js"></script>

2. Load the jQuery Material Form Fields plugin's files in the web page.

<link href="css/jquery.material.form.css" rel="stylesheet">
<script src="js/jquery.material.form.js"></script>

3. Add text fields into your form as follow.

<form action="" class="material">
  <input type="email" placeholder="E-mail" required>
  <input type="text" placeholder="Name">
  <textarea placeholder="Message"></textarea>
  <select name="mySelect" placeholder="Select one of these">
    <option value="1">Option</option>
    <option value="2">Super option</option>
    <option value="3" selected>Awesome option</option>
    <option value="4">WORST option ever</option>
  </select>
  <select name="mySelects" placeholder="You can select multiple" multiple>
    <option value="1">Option</option>
    <option value="2" selected>Super option</option>
    <option value="3" selected>Awesome option</option>
  </select>
</form>

4. Initialize the plugin.

$(function(){

  $('form.material').materialForm();

  $('form').validate({ 
    errorPlacement: function(error, element) {}
  }); 

});

Change logs:

2015-02-02

• Checkbox and radio button added

2015-01-29

• Checkbox and radio button added

---

This awesome jQuery plugin is developed by emilsgulbis. For more Advanced Usages, please check the demo page or visit the official website.