forked from surjithctly/documentation-html-template
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (161 loc) · 9.76 KB
/
index.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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="keywords" content="">
<title>- DOC | Magento 2 -</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/stroke.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="js/syntax-highlighter/styles/shCore.css" media="all">
<link rel="stylesheet" type="text/css" href="js/syntax-highlighter/styles/shThemeRDark.css" media="all">
<!-- CUSTOM -->
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div class="container">
<section id="top" class="section docs-heading">
<div class="row">
<div class="col-md-12">
<div class="big-title text-center">
<h1>- DOC | Magento 2 -</h1>
</div>
</div>
</div>
<hr>
</section>
<div class="row">
<div class="col-md-3">
<nav class="docs-sidebar" data-spy="affix" data-offset-top="300" data-offset-bottom="200" role="navigation">
<ul class="nav">
<li><a href="#form-validators">Form Validators</a></li>
</ul>
</nav>
</div>
<div class="col-md-9">
<section id="form-validators" class="section">
<div class="row">
<div class="col-md-12 left-align">
<h2 class="dark-text">Form Validators <a href="#top">#back to top</a><hr></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>The instructions bellow will help you to create a custom validation to your forms</p>
<h4>
1. Create your validation rule -
<a target="_blank" href="https://github.com/LucasCalazans/magento-doc/blob/master/view/frontend/web/js/model/custom-validators.js">custom-validators.js</a>
</h4>
<pre class="brush: js; highlight: [2,3,8]">
define([
'jquery',
'jquery/validate',
'mage/translate'
], function ($) {
'use strict';
$.validator.addMethod('custom-validator', function(value, element, option) {
return (+value === 42);
}, $.mage.__('This field must be equal to 42.'));
return true;
});
</pre>
<p>
First of all you need to import jQuery and jQuery Validate (lines 2 and 3) to be able to add a new method.
</p>
<p>
The <strong>addMethod</strong> function accepts 3 parameters.
The first is the validation name, that you will use to call it on html.
The second parameter is a callback that is executed when the form send the submit event.
You can receive 3 values in this callback, the field value, the element with the validation and the option value that was specified on html (See the step 4, in our case the option was "true").
In this callback you can return true or false, being that <strong>false</strong> will stop the submit event and return your custom message to user.
The last parameter of addMethod is a custom message that is used when your validation return false.
</p>
<h4>
2. Add an alias to your model <i>(Not required)</i> -
<a target="_blank" href="https://github.com/LucasCalazans/magento-doc/blob/master/view/frontend/requirejs-config.js">requirejs-config.js</a>
</h4>
<pre class="brush: js; highlight: [4]">
var config = {
map: {
'*': {
'import-validators': 'Webjump_Doc/js/model/custom-validators'
}
}
};
</pre>
<p>
You can create an alias to your model.js creating a requirejs-config.js on your module.
However, this is not a required step, you can use the full path instead, but this configuration is highly <a href="http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/requirejs_concept.html">recommended</a>
</p>
<h4>
3. Create the bind to your form -
<a target="_blank" href="https://github.com/LucasCalazans/magento-doc/blob/master/view/frontend/templates/webjump/validators.phtml">validators.phtml</a>
</h4>
<pre class="brush: html; first-line: 21; highlight: [23,25]">
<script type="text/x-magento-init">
{
"#custom-form": {
"validation": {},
"import-validators": {}
}
}
</script>
</pre>
<p>
The third step is add the code above in your form container (.phtml) to create a bind with your <i>model.js</i>.
The line 23 is your container that you want to use your validation (You can put any css selector here).
You need to put your model alias here <strike>or the full path</strike> to Magento load your .js file.
</p>
<h4>
4. Add your new validator to your field -
<a target="_blank" href="https://github.com/LucasCalazans/magento-doc/blob/master/view/frontend/templates/webjump/validators.phtml">validators.phtml</a>
</h4>
<pre class="brush: html; first-line: 7; highlight: [8]">
<div class="control">
<input data-validate="{ required: true, 'custom-validator': true }" />
</div>
</pre>
<p>
Finally you need to add the <strong>data-validate</strong> with your custom validator name in your field and your validator is configured.
</p>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<!-- CUSTOM PLUGINS -->
<script src="js/custom.js"></script>
<script src="js/main.js"></script>
<script src="js/syntax-highlighter/scripts/shCore.js"></script>
<script src="js/syntax-highlighter/scripts/shBrushXml.js"></script>
<script src="js/syntax-highlighter/scripts/shBrushCss.js"></script>
<script src="js/syntax-highlighter/scripts/shBrushJScript.js"></script>
</body>
</html>