Skip to content

Commit c93a7cb

Browse files
phuocngphuocng
committed
feat: Add more examples
1 parent 27cdb21 commit c93a7cb

File tree

62 files changed

+6462
-134
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+6462
-134
lines changed

‎README.md

+156-118
Large diffs are not rendered by default.

‎excluding-field-by-given-condition/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
44
<title>FormValidation example - Excluding field by given condition</title>
55
<meta charset="utf-8" />

‎integrating-with-bootstrap-show-password/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Integrating with Bootstrap Show Password - FormValidation</title>
5+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css">
8+
<style>
9+
.password-container i.fv-plugins-icon {
10+
right: -22px !important;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<div class="container mt-5">
16+
<form id="demoForm" method="POST">
17+
<div class="form-group row password-container">
18+
<label class="col-md-3 col-form-label">Password</label>
19+
<div class="col-md-6">
20+
<input data-toggle="password" name="pwd" class="form-control" type="password" placeholder="Enter the password" />
21+
</div>
22+
</div>
23+
24+
<div class="form-group row">
25+
<div class="col-md-9 offset-md-3">
26+
<button type="submit" class="btn btn-primary">Submit</button>
27+
</div>
28+
</div>
29+
</form>
30+
</div>
31+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
32+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
33+
<script src="https://unpkg.com/bootstrap-show-password@1.2.1/dist/bootstrap-show-password.min.js"></script>
34+
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
35+
<script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>
36+
<script>
37+
document.addEventListener('DOMContentLoaded', function(e) {
38+
const demoForm = document.getElementById('demoForm');
39+
const fv = FormValidation.formValidation(demoForm, {
40+
fields: {
41+
pwd: {
42+
validators: {
43+
notEmpty: {
44+
message: 'The password is required'
45+
},
46+
stringLength: {
47+
min: 6,
48+
max: 20,
49+
message: 'The length of password must be between 6 and 20'
50+
},
51+
}
52+
},
53+
},
54+
plugins: {
55+
trigger: new FormValidation.plugins.Trigger(),
56+
submitButton: new FormValidation.plugins.SubmitButton(),
57+
bootstrap: new FormValidation.plugins.Bootstrap(),
58+
icon: new FormValidation.plugins.Icon({
59+
valid: 'fa fa-check',
60+
invalid: 'fa fa-times',
61+
validating: 'fa fa-refresh'
62+
}),
63+
}
64+
});
65+
});
66+
</script>
67+
</body>
68+
</html>

‎integrating-with-secure-submit/index.html

+192
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Integrating with SecureSubmit - FormValidation</title>
5+
<meta charset="utf-8" />
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
8+
<link rel="stylesheet" href="/vendors/@form-validation/umd/styles/index.min.css">
9+
</head>
10+
<body>
11+
<form id="demoForm" method="POST">
12+
<div class="form-group row">
13+
<label class="col-md-3 col-form-label">Credit card number</label>
14+
<div class="col-md-5">
15+
<input type="text" class="form-control" name="cc" />
16+
</div>
17+
</div>
18+
19+
<div class="form-group row">
20+
<label class="col-md-3 col-form-label">Expiration</label>
21+
<div class="col-md-4">
22+
<input type="text" class="form-control" name="expMonth" placeholder="Month" />
23+
</div>
24+
<div class="col-md-4">
25+
<input type="text" class="form-control" name="expYear" placeholder="Year" />
26+
</div>
27+
</div>
28+
29+
<div class="form-group row">
30+
<label class="col-md-3 col-form-label">CVV number</label>
31+
<div class="col-md-5">
32+
<input type="text" class="form-control" name="cvv" />
33+
</div>
34+
</div>
35+
36+
<div class="form-group row">
37+
<div class="col-md-9 offset-md-3">
38+
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
39+
</div>
40+
</div>
41+
42+
<input name="hiddenToken" type="hidden" />
43+
</form>
44+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
45+
<script src="/vendors/@form-validation/umd/bundle/popular.min.js"></script>
46+
<script src="/vendors/@form-validation/umd/plugin-bootstrap/index.min.js"></script>
47+
<script>
48+
document.addEventListener('DOMContentLoaded', function(e) {
49+
const demoForm = document.getElementById('demoForm');
50+
const fv = FormValidation.formValidation(demoForm, {
51+
fields: {
52+
cc: {
53+
validators: {
54+
notEmpty: {
55+
message: 'The credit card number is required'
56+
},
57+
creditCard: {
58+
message: 'The credit card number is not valid'
59+
},
60+
}
61+
},
62+
expMonth: {
63+
validators: {
64+
notEmpty: {
65+
message: 'The expiration month is required'
66+
},
67+
digits: {
68+
message: 'The expiration month can contain digits only'
69+
},
70+
callback: {
71+
message: 'Expired',
72+
callback: function(input) {
73+
const value = parseInt(input.value, 10);
74+
const year = demoForm.querySelector('[name="expYear"]').value;
75+
const currentMonth = (new Date()).getMonth() + 1;
76+
const currentYear = (new Date()).getFullYear();
77+
if (value < 0 || value > 12) {
78+
return false;
79+
}
80+
if (year === '') {
81+
return true;
82+
}
83+
const expYear = parseInt(year, 10);
84+
if (expYear > currentYear || (expYear === currentYear && value >= currentMonth)) {
85+
fv.updateFieldStatus('expYear', 'Valid');
86+
return true;
87+
} else {
88+
return false;
89+
}
90+
},
91+
},
92+
},
93+
},
94+
expYear: {
95+
validators: {
96+
notEmpty: {
97+
message: 'The expiration year is required'
98+
},
99+
digits: {
100+
message: 'The expiration year can contain digits only'
101+
},
102+
callback: {
103+
message: 'Expired',
104+
callback: function(input) {
105+
const value = parseInt(input.value, 10);
106+
const month = demoForm.querySelector('[name="expMonth"]').value;
107+
const currentMonth = new Date().getMonth() + 1;
108+
const currentYear = new Date().getFullYear();
109+
if (value < currentYear || value > currentYear + 10) {
110+
return false;
111+
}
112+
if (month == '') {
113+
return false;
114+
}
115+
const expMonth = parseInt(month, 10);
116+
if (value > currentYear || (value == currentYear && expMonth >= currentMonth)) {
117+
fv.updateFieldStatus('expMonth', 'Valid');
118+
return true;
119+
} else {
120+
return false;
121+
}
122+
},
123+
},
124+
},
125+
},
126+
cvv: {
127+
validators: {
128+
notEmpty: {
129+
message: 'The CVV number is required'
130+
},
131+
regexp: {
132+
regexp: /^[0-9]{3,4}$/,
133+
message: 'The CVV number is not valid'
134+
},
135+
}
136+
},
137+
},
138+
plugins: {
139+
trigger: new FormValidation.plugins.Trigger(),
140+
submitButton: new FormValidation.plugins.SubmitButton(),
141+
bootstrap: new FormValidation.plugins.Bootstrap({
142+
rowSelector: function(field, ele) {
143+
switch (field) {
144+
case 'expMonth':
145+
case 'expYear':
146+
return '.col-md-4';
147+
default:
148+
return '.form-group';
149+
}
150+
}
151+
}),
152+
icon: new FormValidation.plugins.Icon({
153+
valid: 'fa fa-check',
154+
invalid: 'fa fa-times',
155+
validating: 'fa fa-refresh'
156+
}),
157+
}
158+
});
159+
160+
// Send the data to HeartLand when the form is valid
161+
fv.on('core.form.valid', function() {
162+
console.log('Send data to HeartLand');
163+
$.ajax({
164+
cache: false,
165+
url: 'https://cert.api2.heartlandportico.com/Hps.Exchange.PosGateway.Hpf.v1/api/token',
166+
data: {
167+
'api_key': 'pkapi_cert_aaaaaaaaaaa',
168+
'object': 'token',
169+
'token_type': 'supt',
170+
'_method': 'post',
171+
'card[number]': demoForm.querySelector('[name="cc"]').value,
172+
'card[cvc]': demoForm.querySelector('[name="cvv"]').value,
173+
'card[exp_month]': demoForm.querySelector('[name="expMonth"]').value,
174+
'card[exp_year]': demoForm.querySelector('[name="expYear"]').value
175+
},
176+
dataType: 'jsonp',
177+
success: function(response) {
178+
console.log(response);
179+
180+
// Do whatever with the response
181+
// For example, set the token ...
182+
// demoForm.querySelector('[name="hiddenToken"]').value = '...'
183+
184+
// ... and submit the form
185+
demoForm.submit();
186+
}
187+
})
188+
});
189+
});
190+
</script>
191+
</body>
192+
</html>

0 commit comments

Comments
 (0)