text-input-validator
v0.1.3
Published
Progressive text input control validator
Downloads
12
Readme
text-input-validator
Progressive text input control validator.
Most validate-while-typing validators are annoying, they will flash red warning at you when you type first letter. Well of course, I havn't finished typing yet!
This validator is not the same. It can use different checking rules on typing and finished.
Usage
See file examples/index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../TextInputValidator.js"></script>
</head>
<body>
<p>Email: <input type="text" id="foo"> <span id="error-foo"></span></p>
<p><button onclick="forceSetError()">force set error</button></p>
<script>
const validator = new TextInputValidator({
element: document.getElementById('foo'),
input: /(?!.*[-_.+@]{2,})(?!^[-_.+@])^[-_.+a-z0-9]+(@([-.a-z0-9]+)?)?$/i,
blur(email) {
return /(?!.*[-_.+@]{2,})(?!^[-_.+@])^[-_.+a-z0-9]+@[-.a-z0-9]+\.[a-z]+$/i.test(email) && isRegistered(email).then(reged => !reged || 'this email has been taken')
},
onValidityChange(valid) {
document.getElementById('error-foo').textContent = valid === true || valid === null ? '' : valid || 'invalid'
}
})
function forceSetError() {
validator.setValidity('force error')
}
function isRegistered(email) {
// emulate a remote API call
return new Promise(resolve => {
setTimeout(() => {
const registeredEmail = [
'[email protected]',
'[email protected]'
]
resolve(registeredEmail.includes(email))
}, 300)
})
}
</script>
</body>
</html>APIs
new TextInputValidate({ element, input, blur, onValidityChange })
element: the input element
input: RegExp or function. Optional. Rule for checking on input. It can return immediately or return a promise that resolves with value:
true: valid
false: invalid
null | undefined: initial state
other types: your custom state, e.g. invalid message, password strength, etc.blur: Rule for checking on blur. Optional. Similar to input. Will also check the standard HTML5 validating attributes (such as "required" and "pattern") via HTMLInputElement.checkValidity()
onValidityChange(valid): callback function. called when validity changes.
valid: the result given by input and blur.
textInputValidate.check()
Validate manually. Returns promise.
textInputValidate.setRules({ input, blur })
Set new rules for input and blur
textInputValidate.setValidity(valid)
Set validity of the input control.
valid: same as input and blur option of constructor.
If validity is not equal to current state, onValidityChange callback will be called.
Returns a promise resolved with value valid
textInputValidate.on()
Turn on validator
textInputValidate.off()
Turn off validator
Build
npm run buildLicense
MIT