-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample.html
123 lines (113 loc) · 4.02 KB
/
example.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Input Validator</title>
<script src="./InputValidator.js"></script>
</head>
<style>
input, select {
width: 20%;
}
</style>
<body>
<form id='testForm'>
<input type='text' data-inputvalidator='text&&callback1&message1' placeholder="Enter text"><br><br>
<input type='text' data-inputvalidator='email&message2&callback2&message3' placeholder="Enter email"><br><br>
<input type='text' data-inputvalidator='digit&message4' placeholder="Enter number"><br><br>
<input type='text' data-inputvalidator='password1&message5&message6' placeholder="Enter password"><br><br>
<input type='text' data-inputvalidator='password2&message5&message6' placeholder="Enter password"><br><br><br>
<select data-inputvalidator='text&&callback3&message7'>
<option value='default_value'>How old are you?</option>
<option value='between0_30'>0 - 30 years</option>
<option value='between30-60'>30 - 60 years</option>
<option value='between60_more'>60 and more</option>
</select>
<br><br><br>
<input type='submit' value='Submit'>
</form>
</body>
<script>
// callback1 function - for instance, allow only text of at least 3 chars
const testText = (text_value)=> {
return text_value.length >= 3 ? true : false;
}
// callback2 function - check if the user's email address already exists
const checkUser = (user) => {
return new Promise(async (resolve) => {
const data = await fetch(`./sql_api.php?q=check_user&user=${user}`);
const response = await data.text();
if(response === 'user_exists') {
resolve(false);
} else {
resolve(true);
}
});
}
// callback3 function - check if any option was selected
const testSelect = (selected_value)=> {
if(selected_value === 'default_value') {
return false;
}
else {
return true;
}
}
// instantiate Validator
const inst = new Validator({
validate_on_lost_focus: true,
validate_form_on_submit: true,
scroll_to_input: true,
scroll_behavior: 'smooth',
error_message_display: true,
/*
error_message_place_class: 'row',
error_message_place_where: 'afterend',
error_message_div_contains: `class='row'`,
*/
custom_styles_change: {
borderColor: 'red',
borderRadius: '5px'
},
custom_styles_initial: {
borderColor: 'grey'
},
error_messages: {
// message0 is always intended for not filled input
message0: 'The field cannot be empty',
message1: 'Text field must be at least 3 characters long',
message2: 'Not valid email format',
message3: 'The entered email address already exists',
message4: 'Not a number',
message5: 'Password must be at least 6 chars long and must contain an uppercase letter and a number',
message6: 'Passwords DO NOT match',
message7: 'You must select some option'
},
error_message_styles: {
marginBottom: '5px',
color: 'red'
},
callbacks: {
callback1: testText,
callback2: checkUser,
callback3: testSelect
}
});
// add event listener on submitting the form
document.querySelector('form').addEventListener('submit', (e)=>{
e.preventDefault();
// launch validation of all fields within the parent element (Form) => returns Promise, if true then the form is ok, if false, then the form is NOT ok
inst.validateForm(document.querySelector('form'))
.then(val => {
if(val === true) {
alert('The form is alright');
}
else {
alert('The form IS NOT alright');
}
});
});
</script>
</html>