jQuery Number Text Field Validation Using Regex
by Pritom K Mondal
HTML
<input type='text' class='number' data-max='910' data-double='1' data-positive='1' data-precision='3'/>
<div class='live'></div>
<div class='change'></div>
CSS
input, div {
width: calc(100% - 34px);
padding: 10px;
margin: 7px;
border-radius: 4px;
border: 1px solid #203003;
min-height: 20px;
font-family: monospace;
font-size: 17px;
font-style: italic;
color: #777777;
}
JavaScript
(function () {
var d;
window.NumberFieldValidator ? d = window.NumberFieldValidator : (
d = {}, window.NumberFieldValidator = d
);
d.initialize = function () {
var data = {attrs: {}};
data.attrs.max = 100;
data.attrs.double = 1;
data.attrs.positive = 1;
data.attrs.precision = 12;
data.fireEvents = ["_input", "_change"];
console.log(data);
};
d.initialize();
function bindEvents(field) {
var data = field.data(), accessed = false;
field.data("_old", field.val());
field.on("keypress keydown input", function (e) {
accessed = false;
if (e.type === "input") {
var _val = field.val(), _rm = data.pattern.test(_val);
if (!_rm) field.val(field.data("_old"));
else if (_rm) {
if (parseFloat(_val) > data.max) field.val(field.data("_old"));
else field.data("_old", _val);
}
if (!accessed) {
setTimeout(function () {
field.trigger("_change");
});
}
return;
}
if (e.key === undefined || e.key == 'Unidentified') return true;
accessed = true;
if (e.ctrlKey && (e.key === "v" || e.key === "x" || e.key === "c")) {
return true;
}
var v = getTextFieldValue(this, e.key, e.key);
if (!v.length) return true;
if (data.pattern.test(v) && parseFloat(v) <= data.max) {
return true;
}
return false;
});
field[0].addEventListener("cut", function (e) {
console.log("CUT EVENT");
var te = $(this), v = getTextFieldValue(this, e.key, "Delete"), ov = te.val();
if (!data.pattern.test(v) || parseFloat(v) > data.max) {
setTimeout(function () {
...