boss-validator
Version:
The simplest library to validate data or forms.
141 lines (121 loc) • 3.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Boss</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body { font-family: Arial; }
.boss--error {
display: block;
}
.form-group {
margin: 20px 0;
}
input {
width: 100%;
padding: 10px 13px;
border: 1px solid #eee;
}
input.boss--is-wrong {
border: 1px solid red;
}
.boss--error {
background: red;
color: white;
padding: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<form action="" id="form">
<div class="form-group"><input id="name" type="text" name="name" placeholder="Name" /></div>
<div class="form-group"><input id="lastname" type="text" name="lastname" placeholder="Lastname" /></div>
<div class="form-group"><input type="number" name="age" placeholder="Age" /></div>
<div class="form-group"><input type="file" name="logo" /></div>
<button>Send</button>
</form>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Object.keys,Promise,String.prototype.endsWith,Element.prototype.classList,Object.assign"></script>
<script src="js/boss.core.js"></script>
<script>
var form = document.querySelector('#form');
var validations = {
name: {
required: true
},
age: {
required: true,
between: [[5, 10], [50, 70]]
},
photo: {
required: true,
extensions: ['jpg', 'png']
},
email: {
email: true
},
cep: {
regex: {
value: /^\d{5}-\d{3}$|^\d{8}$/,
message: 'Please, fill in this format 00.000-000.'
}
},
renavam: {
exact: 10,
number: true
},
url: {
required: true,
url: true,
https: true
},
terms: {
required: true
},
cc: {
br_phone: true
},
uf: {
contains: 'A'
}
};
//
// Boss.configure({
// errorElement: 'h1'
// });
// Boss.configureMessages({
// required: 'UHAHUAUUAHAUHA',
// default: '11111111111',
// });
// Boss.addValidator({
// name: 'br_phone',
// validator: function (el, value) {
// return el.value == 1;
// },
// message: 'The value needs to be {val}'
// });
let filters = {
name: ['trim', 'uppercase'],
lastname: ['slug', 'base64_encode']
};
let filteredData = Boss.transform(form, filters);
form.addEventListener('submit', function (e) {
e.preventDefault();
var validate = Boss.validate(form, validations, filters);
validate
.then(data => {
console.log(data.transformed, data.source);
})
.catch(function (err) {
console.log(err);
});
});
</script>
</body>
</html>