@gdev-org/gdev_form_validator
Version:
A robust form validation library for js based applications. No js required, no dependency.
129 lines (119 loc) • 4.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>gdev_form_validator / test</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background:linear-gradient(to top, #acabb9 0%, #cbd7f6 100%);
}
button {
width: 99%;
padding: 13px;
color: white;
background-color: rgb(56, 56, 255);
border: none;
border-radius: 5px;
margin: 40px 0;
}
</style>
</head>
<body>
<form
id="myForm"
lang="en"
form_validator_design="ifta-label"
response_exclude='["toggler"]'
>
<div style=" text-align: center; font-weight: 900; font-size: 2.5rem; margin: 20px 0;"><span style="color: blue;">Online</span> Portal</div>
<div class="gdev-field-wrapper">
<div class="capsule">
<label for="fullname">User name</label>
<input
type="text"
id="fullname"
placeholder="Enter user name"
name="fullname"
gdev_props='{"name":"fullname","type":"text", "minWord": "2@@please enter first and second name."}'
/>
</div>
<span class="gdev-error"></span>
</div>
<div class="gdev-field-wrapper">
<div class="capsule">
<label for="phone">Phone</label>
<input
type="tel"
placeholder="Enter phone number"
id="phone"
name="email"
gdev_props='{"name":"phone","type":"tel", "country": "cameroon@@provide a valid Cameroon phone number."}'
/>
</div>
<span class="gdev-error"></span>
</div>
<div class="gdev-field-wrapper">
<div class="capsule">
<label for="email">Email</label>
<input
type="text"
placeholder="Enter email"
id="email"
name="email"
gdev_props='{"name":"email","type":"email", "provider": "gmail@@only gmail is valid here."}'
/>
</div>
<span class="gdev-error"></span>
</div>
<div class="gdev-field-wrapper">
<div class="capsule">
<label for="password">password</label>
<input
id="password"
type="password"
gdev_props='{"type":"password","name":"password", "minLen":"8@@password must be at least 8 characters long.", "sequentialPatternCount":"3@@password cant contain sequential patern.", "confirmWith":"cpassword"}'
placeholder="password"
/>
</div>
<span class="gdev-error"></span>
</div>
<div class="gdev-field-wrapper">
<div class="capsule">
<label for="cpassword">confirm password</label>
<input
id="cpassword"
type="password"
gdev_props='{"type":"password","name":"cpassword", "minLen":"8@@password must be at least 8 characters long.", "sequentialPatternCount":"3@@password cant contain sequential patern.", "confirmWith":"password"}'
placeholder="Enter password again"
/>
</div>
<span class="gdev-error"></span>
</div>
<div class="gdev-field-wrapper">
<input
type="checkbox"
id="toggler"
gdev_props='{"name":"toggler", "type":"checkbox", "value":"toggler", "linkTo":"password,passwordShowToggle"}'
/>
<label htmlFor="cn">show password</label>
</div>
<button type="submit">submit</button>
</form>
<script type="module" src="../dist/gdev_form_validator.js"></script>
<script type="module">
document
.getElementById("myForm")
.addEventListener("onCompleteValidation", (e) => {
const res = validationResponse.myForm;
console.log(res);
});
</script>
</body>
</html>