Native JavaScript Form Validation for Browser / UI Framework.
There is a lot of Form Validation
, but most of them was created for jQuery
and too bloated. This is an native
javascript form validation which is can be use for all kind of javascript UI framework.
$ npm install native-form-validation
// load using require in nodejs
const FormValidation = require('native-form-validation');
// or load using import in typescript
import FormValidation from 'native-form-validation';
// or load use with path for client side
<script src="node_modules/native-form-validation/dist/formvalidation.min.js"></script>
Or simply use with CDN
<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/npm/native-form-validation/dist/formvalidation.min.js"></script>
<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/npm/native-form-validation@1/dist/formvalidation.min.js"></script>
<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/npm/native-form-validation@1.4/dist/formvalidation.min.js"></script>
<!-- Get a specific version -->
<!-- Recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/npm/native-form-validation@1.4.0/dist/formvalidation.min.js"></script>
var FV = new FormValidation();
// Create the rules
FV.rules({
username: {
required: true,
message: 'Username must be min 3-20 chars!',
minLength:3,
maxLength:20,
regex: /^[a-zA-Z0-9]/,
errorPlace:'username-error',
errorAddClass: {
username_group:'has-danger',
username:'is-invalid'
}
},
email: {
regex: /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
errorPlace:'email-error',
errorAddClass: {
email_group:'has-danger',
email:'is-invalid'
}
}
});
// Validate all
FV.validate();
// Determine is Valid all
if(FV.isValid()) {
// run your code
}
// Validate per element
FV.element('username').validate();
// Determine is Valid per element
if(FV.element('username').isValid()) {
// run your code
}
Please see our Wiki at here.