JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form>
<div class="fieldContainer">
<label for="phone">Phone Number:</label>
<input type="text" name="phone" />
</div>
<div class="fieldContainer">
<label for="phone2">Phone Number:</label>
<input type="text" name="phone2" />
</div>
<input type="submit" />
</form>
CSS
body {
margin: 100px;
}
form {
width: 400px;
}
.fieldContainer {
position: relative;
margin-bottom: 20px;
}
label.error {
position: absolute;
right: 143px;
top: -25px;
border: solid 1px #000;
background: #fff;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .7);
padding: 2px 5px;
}
JavaScript
$('form').validate({ // initialize the plugin
rules: {
phone: {
required: true,
digits: true
},
phone2: {
required: true,
digits: true
}
}
});
$('form').find('input').blur(function(){
alert(111);
$(this).siblings('label.error').hide();
});