JSFiddle - React, Tailwind, and code Playground
HTML
<div style="width:100%" align="center">
<form id="frmRegister" role="form" target="_self">
<div class="form-group" align="center">
<span>Registration</span>
</div>
<div class="form-group">
<input id="txtRegUsername" name="txtRegUsername" type="text" class="form-control" maxlength="20" placeholder="USERNAME" autocomplete="on">
</div>
<div class="form-group">
<input id="txtRegEmail" name="txtRegEmail" type="text" class="form-control" maxlength="255" placeholder="EMAIL" autocomplete="on">
</div>
<div class="form-group">
<input id="txtRegPassword" name="txtRegPassword" type="password" class="form-control" maxlength="100" placeholder="PASSWORD">
</div>
<div class="form-group">
<input id="txtRegConfirmPassword" name="txtRegConfirmPassword" type="password" class="form-control" maxlength="100" placeholder="CONFIRM PASSWORD">
</div>
<div class="form-group">
<button id="butRegister" type="button" class="btn btn-default">
Register
</button>
</div>
</form>
</div>
JavaScript
$(document).ready(function() {
$('#txtRegUsername').on("blur", function(e) {
//if ($('#txtRegUsername').val()!=="") {
alert("username Blur event");
//}
});
//$('#txtRegUsername').on("focus",function(e) {
//alert("username Focus event");
//});
$('#txtRegEmail').on("blur", function(e) {
//if ($('#txtRegEmail').val()!=="") {
alert("email Blur event");
//}
});
//$('#txtRegEmail').on("focus",function(e) {
//alert("email Focus event");
//});
$('#txtRegPassword').on("blur", function(e) {
//if ($('#txtRegPassword').val()!=="") {
alert("password Blur event");
//}
});
//$('#txtRegPassword').on("focus",function(e) {
//alert("password Focus event");
//});
$('#txtRegConfirmPassword').on("blur", function(e) {
//if ($('#txtRegConfirmPassword').val()!=="") {
alert("confirm_password Blur event");
//}
});
//$('#txtRegConfirmPassword').on("focus",function(e) {
//alert("confirmpassword Focus event");
//});
});