JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<input type="text" data-placement="bottom" data-trigger="manual" data-content="" name="momlastname" id="momlastname" ng-model="momlastname" />
JavaScript
(function () {
function firstCapital(word) {
return /^[A-Z]/.test(word);
};
function NumberOnly(e) {
var inp = String.fromCharCode(e.which);
if (/[0-9]/.test(inp)) return true;
else return false;
};
$('#momlastname').keypress(function (f) {
switch ($(this).val().length) {
case 1:
message = "Lower letter";
break;
case 10:
message = "10 characters have been reached";
break;
}
if (NumberOnly(f)) {
f.preventDefault();
$('#momlastname').popover({
trigger: 'manual',
content: function () {
return "Enter text only. Numbers cannot be entered.";
}
});
$('#momlastname').popover('show');
$('#momlastname').addClass('error');
} else if ($(this).val().length == 1 && !firstCapital($(this).val())) {
$('#momlastname').popover({
trigger: 'manual',
content: function () {
return message;
}
});
$('#momlastname').popover('show');
$('#momlastname').addClass('error');
} else if ($(this).val().length == 70) {
$('#momlastname').popover({
trigger: 'manual',
content: function () {
return message;
}
});
$('#momlastname').popover('show');
$('#momlastname').addClass('error');
} else {
$('#momlastname').popover('hide');
$('#momlastname').removeClass('error');
}
});
});