jQuery Form Styler + jQuery Validation
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://dimox.github.io/jQueryFormStyler/dist/jquery.formstyler.js"></script>
<link rel="stylesheet" href="https://dimox.github.io/jQueryFormStyler/dist/jquery.formstyler.css">
<link rel="stylesheet" href="https://dimox.github.io/jQueryFormStyler/dist/jquery.formstyler.theme.css">
<form method="post" action="">
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" class="styler" required/>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" class="styler" required/>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url" class="styler"/>
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" class="styler" required></textarea>
</p>
<p>
<label for="checkbox">checkbox (required)</label>
<input id="checkbox" type="checkbox" name="checkbox" required/>
</p>
<p>
<label for="radio">radio (required)</label>
<input id="radio" type="radio" name="radio" required/>
</p>
<p>
<select required>
<option></option>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
<option>Пункт 5</option>
</select>
</p>
<p>
<input class="styler" type="submit" value="Submit"/>
</p>
</form>
CSS
.error {
outline: 2px solid #fc8484 !important;
outline-radius:5px;
}
label.error {
display: none !important;
}
select {
width: 200px;
}
JavaScript
$('input, select').styler();
$("form").validate({
invalidHandler: function() {
setTimeout(function() {
$('input, select').trigger('refresh');
}, 1)
}
});