JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js"></script>
<form method="post" action="#">
<input type="text" name="name" placeholder="Your name">
<input type="text" name="email" placeholder="[email protected]">
<button type="submit">Submit</button>
</form>
CSS
input,button {
display: block;
}
.hint {
font-style: italic;
color: #ccc;
}
JavaScript
$.support.placeholder = (function() {
var i = document.createElement( 'input' );
return 'placeholder' in i;
})();
$('input')
.addClass('hint')
.val( function() {
if ( !$.support.placeholder ) {
return $(this).attr('placeholder');
}
})
.bind({
focus: function() {
var $this = $(this);
$this.removeClass('hint');
if ( $this.val() === $this.attr('placeholder') ) {
$this.val('');
}
},
blur: function() {
var $this = $(this),
// Trim whitespace if only space characters are entered,
// which breaks the placeholders.
val = $.trim( $this.val() ),
ph = $this.attr('placeholder');
if ( val === ph || val === '' ) {
$this.addClass('hint').val('');
if ( !$.support.placeholder ) {
$this.val(ph);
}
}
}
});
// Test if the submitted value is not equal to our placeholder.
// Use the default validation message for required fields.
$.validator.addMethod('notPlaceholder', function(val, el) {
return ( val !== $(el).attr('placeholder') );
}, $.validator.messages.required);
$('form').validate({
rules: {
name: {
required: true,
notPlaceholder: true
},
email: {
required: true,
notPlaceholder: true,
email: true
}
},
// This is just for jsfiddle.
debug: true,
submitHandler: function(form) {
$.each( $(form).serializeArray(), function(i, f) {
$(form).append('<p>' +f.value+ '</p>');
});
}
});