Skip to content

Commit 18b9163

Browse files
author
Yulius Gita
committed
add form validation page
1 parent cd2c9f0 commit 18b9163

5 files changed

Lines changed: 185 additions & 0 deletions

File tree

‎src/assets/js/extensions/parsley.custom.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
$(function() {
2+
Parsley.addValidator('restrictedCity', {
3+
requirementType: 'string',
4+
validateString: function(value, requirement) {
5+
value = (value || "").trim();
6+
return value === "" || value.toLowerCase() === requirement.toLowerCase();
7+
},
8+
messages: {
9+
en: 'You have to live in <a href="https://www.google.com/maps/place/Jakarta">Jakarta</a>.'
10+
}
11+
});
12+
});

‎src/assets/js/extensions/parsley.init.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
$.extend(window.Parsley.options, {
2+
focus: 'first',
3+
excluded: 'input[type=button], input[type=submit], input[type=reset], .search, .ignore',
4+
triggerAfterFailure: 'input change blur',
5+
errorsContainer: function (element) { },
6+
trigger: 'change',
7+
successClass: 'is-valid',
8+
errorClass: 'is-invalid',
9+
classHandler: function (el) {
10+
return el.$element.closest('.form-group');
11+
},
12+
errorsContainer: function (el) {
13+
return el.$element.closest('.form-group');
14+
},
15+
errorsWrapper: '<div class="parsley-error"></div>',
16+
errorTemplate: '<span></span>',
17+
});
18+
19+
$(function () {
20+
Parsley.on('field:validated', function (el) {
21+
var elNode = $(el)[0];
22+
if (elNode && !elNode.isValid()) {
23+
var rqeuiredValResult = elNode.validationResult.filter(function(vr) { return vr.assert.name === 'required'; });
24+
if (rqeuiredValResult.length > 0) {
25+
var fieldNode = $(elNode.element);
26+
var formGroupNode = fieldNode.closest('.form-group');
27+
var lblNode = formGroupNode.find(".form-label:first");
28+
if (lblNode.length > 0) {
29+
30+
// change default error message to include field label
31+
var errorNode = formGroupNode.find('div.parsley-error span[class*=parsley-]');
32+
if (errorNode.length > 0) {
33+
var lblText = lblNode.text();
34+
if (lblText) {
35+
errorNode.html(lblText + " is required.");
36+
}
37+
}
38+
}
39+
}
40+
}
41+
});
42+
});

‎src/assets/js/extensions/parsley.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import 'jquery';
2+
import 'parsleyjs';

‎src/form-validation-parsley.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
{% set title = 'Form Validation' %}
2+
{% set filename = 'form-validation-parsley.html' %}
3+
4+
{% extends 'layouts/master.html' %}
5+
{% block content %}
6+
<div class="page-heading">
7+
<div class="page-title">
8+
<div class="row">
9+
<div class="col-12 col-md-6 order-md-1 order-last">
10+
<h3>Form Validation</h3>
11+
<p class="text-subtitle text-muted">...</p>
12+
</div>
13+
<div class="col-12 col-md-6 order-md-2 order-first">
14+
<nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
15+
<ol class="breadcrumb">
16+
<li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
17+
<li class="breadcrumb-item active" aria-current="page">Form Validation</li>
18+
<li class="breadcrumb-item active" aria-current="page">Parsley</li>
19+
</ol>
20+
</nav>
21+
</div>
22+
</div>
23+
</div>
24+
25+
<!-- // Basic multiple Column Form section start -->
26+
<section id="multiple-column-form">
27+
<div class="row match-height">
28+
<div class="col-12">
29+
<div class="card">
30+
<div class="card-header">
31+
<h4 class="card-title">Multiple Column</h4>
32+
</div>
33+
<div class="card-content">
34+
<div class="card-body">
35+
<form class="form" data-parsley-validate>
36+
<div class="row">
37+
<div class="col-md-6 col-12">
38+
<div class="form-group">
39+
<label for="first-name-column" class="form-label">First Name</label>
40+
<input type="text" id="first-name-column" class="form-control" placeholder="First Name" name="fname-column" data-parsley-required="true">
41+
</div>
42+
</div>
43+
<div class="col-md-6 col-12">
44+
<div class="form-group">
45+
<label for="last-name-column" class="form-label">Last Name</label>
46+
<input type="text" id="last-name-column" class="form-control" placeholder="Last Name" name="lname-column">
47+
</div>
48+
</div>
49+
<div class="col-md-6 col-12">
50+
<div class="form-group">
51+
<label for="city-column" class="form-label">City</label>
52+
<input type="text" id="city-column" class="form-control" placeholder="City" name="city-column" data-parsley-restricted-city="Jakarta">
53+
</div>
54+
</div>
55+
<div class="col-md-6 col-12">
56+
<div class="form-group">
57+
<label for="country-floating" class="form-label">Country</label>
58+
<input type="text" id="country-floating" class="form-control" name="country-floating" placeholder="Country">
59+
</div>
60+
</div>
61+
<div class="col-md-6 col-12">
62+
<div class="form-group">
63+
<label for="company-column" class="form-label">Company</label>
64+
<input type="text" id="company-column" class="form-control" name="company-column" placeholder="Company">
65+
</div>
66+
</div>
67+
<div class="col-md-6 col-12">
68+
<div class="form-group">
69+
<label for="email-id-column" class="form-label">Email</label>
70+
<input type="email" id="email-id-column" class="form-control" name="email-id-column" placeholder="Email" data-parsley-required="true">
71+
</div>
72+
</div>
73+
<div class="col-12">
74+
<div class='form-group'>
75+
<div class="form-check">
76+
<input type="checkbox" id="checkbox5" class='form-check-input' checked data-parsley-required="true" data-parsley-error-message="You have to accept our terms and conditions to proceed.">
77+
<label for="checkbox5" class="form-check-label form-label">I accept these terms and conditions.</label>
78+
</div>
79+
</div>
80+
</div>
81+
</div>
82+
<div class="row">
83+
<div class="col-12">
84+
<div class='form-group'>
85+
<fieldset>
86+
<label class="form-label">
87+
Favourite Colour
88+
</label>
89+
<div class="form-check">
90+
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" data-parsley-required="true">
91+
<label class="form-check-label form-label" for="flexRadioDefault1">
92+
Red
93+
</label>
94+
</div>
95+
<div class="form-check">
96+
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2">
97+
<label class="form-check-label form-label" for="flexRadioDefault2">
98+
Blue
99+
</label>
100+
</div>
101+
</fieldset>
102+
</div>
103+
</div>
104+
</div>
105+
<div class="row">
106+
<div class="col-12 d-flex justify-content-end">
107+
<button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
108+
<button type="reset" class="btn btn-light-secondary me-1 mb-1">Reset</button>
109+
</div>
110+
</div>
111+
</form>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
</section>
118+
<!-- // Basic multiple Column Form section end -->
119+
</div>
120+
{% endblock %}
121+
122+
{% block js %}
123+
<script src="assets/js/extensions/parsley.js"></script>
124+
<script src="assets/js/extensions/parsley.init.js"></script>
125+
<script src="assets/js/extensions/parsley.custom.js"></script>
126+
{% endblock %}

‎webpack.mix.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ mix
4545
.js(`${assetsPath}js/extensions/ui-todolist.js`, "assets/js/extensions")
4646
.js(`${assetsPath}js/extensions/form-element-select.js`, "assets/js/extensions")
4747
.js(`${assetsPath}js/extensions/datatables.js`, "assets/js/extensions")
48+
.js(`${assetsPath}js/extensions/parsley.js`, "assets/js/extensions")
49+
.js(`${assetsPath}js/extensions/parsley.init.js`, "assets/js/extensions")
50+
.js(`${assetsPath}js/extensions/parsley.custom.js`, "assets/js/extensions")
4851
.js(`${assetsPath}js/extensions/quill.js`, "assets/js/extensions")
4952
.js(`${assetsPath}js/extensions/rater-js.js`, "assets/js/extensions")
5053
.js(`${assetsPath}js/extensions/simple-datatables.js`, "assets/js/extensions")

0 commit comments

Comments
 (0)