1 | <!doctype html>
|
2 | <html class="no-js" lang="">
|
3 | <head>
|
4 | <meta charset="utf-8">
|
5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
|
6 | <title>Vue dotnet validator example</title>
|
7 | <meta name="description" content="">
|
8 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
9 | <style>
|
10 | label {
|
11 | display: block;
|
12 | }
|
13 | label span {
|
14 | display: inline-block;
|
15 | width: 200px;
|
16 | }
|
17 | .message {
|
18 | color: red;
|
19 | }
|
20 | </style>
|
21 | </head>
|
22 | <body>
|
23 | <div id="example-site">
|
24 | <vue-dotnet-validator-group inline-template>
|
25 | <form asp-controller="Account" asp-action="Register" method="post" v-on:submit="validate">
|
26 | <validator inline-template>
|
27 | <div>
|
28 | <label>
|
29 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
30 | <span>Radio button 1</span>
|
31 | <input name="radio1" type="radio" value="number1" asp-for="Radio1" ref="field" v-model="val" data-val-required="This field is required" />
|
32 | </label>
|
33 | <label>
|
34 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
35 | <span>Radio button 2</span>
|
36 | <input name="radio1" type="radio" value="number2" asp-for="Radio1" ref="field" v-model="val" data-val-required="This field is required" />
|
37 | </label>
|
38 | </div>
|
39 | </validator>
|
40 |
|
41 | <validator inline-template>
|
42 | <div>
|
43 | <label>
|
44 | <span asp-validation-for="checkbox1" ref="message" class="message"></span>
|
45 | <span>Checkbox 1 (required, has to be true)</span>
|
46 | <input name="checkbox1" type="checkbox" value="true" asp-for="checkbox1" ref="field" data-val-istrue="This field must be true" data-val-required="This field is required" />
|
47 | </label>
|
48 | </div>
|
49 | </validator>
|
50 |
|
51 | <validator :value="true" inline-template>
|
52 | <div>
|
53 | <label>
|
54 | <span asp-validation-for="checkbox2" ref="message" class="message"></span>
|
55 | <span>Checkbox 2 (default checked, required, has to be true)</span>
|
56 | <input name="checkbox2" type="checkbox" value="true" asp-for="checkbox2" ref="field" data-val-istrue="This field must be true" data-val-required="This field is required" checked="checked" />
|
57 | </label>
|
58 | </div>
|
59 | </validator>
|
60 |
|
61 | <validator value="false" inline-template>
|
62 | <div>
|
63 | <label>
|
64 | <span asp-validation-for="checkbox3" ref="message" class="message"></span>
|
65 | <span>Checkbox 3 (can be false)</span>
|
66 | <input name="checkbox3" type="checkbox" value="false" asp-for="checkbox3" ref="field" data-val-required="This field is required" />
|
67 | </label>
|
68 | </div>
|
69 | </validator>
|
70 |
|
71 | <validator inline-template>
|
72 | <label>
|
73 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
74 | <span>Required validator</span>
|
75 | <input name="field1" type="text" asp-for="LastName" ref="field" v-model="val" data-val-required="This field is required" />
|
76 | </label>
|
77 | </validator>
|
78 |
|
79 | <validator inline-template>
|
80 | <label>
|
81 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
82 | <span>Maximum length validator</span>
|
83 | <input name="field2" type="text" asp-for="ShortName" ref="field" v-model="val" data-val-maxlength="You can only use less then 10 characters" data-val-maxlength-max="10" />
|
84 | </label>
|
85 | </validator>
|
86 |
|
87 | <validator inline-template>
|
88 | <label>
|
89 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
90 | <span>Range validator</span>
|
91 | <input name="field3" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-range="You should use a number between 3 and 5" data-val-range-min="3" data-val-range-max="5"/>
|
92 | </label>
|
93 | </validator>
|
94 |
|
95 | <validator inline-template>
|
96 | <label>
|
97 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
98 | <span>Required range validator</span>
|
99 | <input name="field4" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-range="You should use a number between 3 and 5" data-val-range-min="3" data-val-range-max="5" data-val-required="This field is required"/>
|
100 | </label>
|
101 | </validator>
|
102 |
|
103 |
|
104 | <validator value="Predefined value" inline-template>
|
105 | <label>
|
106 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
107 | <span>Custom validator</span>
|
108 | <input name="field5" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-mycustomvalidator="Value should be 'Hello'"/>
|
109 | </label>
|
110 | </validator>
|
111 |
|
112 |
|
113 | <test-component inline-template>
|
114 | <validator v-model="inputValue" inline-template>
|
115 | <label>
|
116 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
117 | <span>Custom component container validator</span>
|
118 | <input name="field6" type="text" asp-for="RangeTest" ref="field" v-model="val" data-val-mycustomvalidator="Value should be 'Hello'"/>
|
119 | </label>
|
120 | </validator>
|
121 | </test-component>
|
122 |
|
123 | <validator value="value from server" inline-template>
|
124 | <label>
|
125 | <span asp-validation-for="stuff" ref="message" class="message">Message from server!</span>
|
126 | <span>Server side message</span>
|
127 | <input name="field6" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required."/>
|
128 | </label>
|
129 | </validator>
|
130 |
|
131 | <validator value="" inline-template>
|
132 | <label>
|
133 | <span asp-validation-for="stuff" ref="message" class="message"></span>
|
134 | <span>Equal to</span>
|
135 | <input name="field7" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required." data-val-equalto="Must be equal to the next input!" data-val-equalto-other="*.field8"/>
|
136 | </label>
|
137 | </validator>
|
138 |
|
139 | <validator value="" inline-template>
|
140 | <label>
|
141 | <span asp-validation-for="stuff" ref="message" class="message"></span>
|
142 | <span>Equal to</span>
|
143 | <input name="field8" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required." data-val-equalto="Must be equal to the previous input!" data-val-equalto-other="*.field7"/>
|
144 | </label>
|
145 | </validator>
|
146 |
|
147 | <validator validation-style="after-change" inline-template>
|
148 | <label>
|
149 | <span asp-validation-for="stuff" ref="message" class="message"></span>
|
150 | <span>After change</span>
|
151 | <input name="field9" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required."/>
|
152 | </label>
|
153 | </validator>
|
154 |
|
155 | <validator validation-style="after-blur" inline-template>
|
156 | <label>
|
157 | <span asp-validation-for="stuff" ref="message" class="message"></span>
|
158 | <span>After blur</span>
|
159 | <input name="field10" type="text" asp-for="stuff" ref="field" v-model="val" data-val-required="This value is required."/>
|
160 | </label>
|
161 | </validator>
|
162 |
|
163 | <validator inline-template>
|
164 | <label>
|
165 | <span asp-validation-for="LastName" ref="message" class="message"></span>
|
166 | <span>Async validator</span>
|
167 | <test-async-component inline-template>
|
168 | <input name="field11" type="text" ref="field" v-model="$parent.val" data-val-required="This value is required."/>
|
169 | </test-async-component>
|
170 | </label>
|
171 | </validator>
|
172 |
|
173 | <button type="submit">Register</button>
|
174 | </form>
|
175 | </vue-dotnet-validator-group>
|
176 | </div>
|
177 |
|
178 | <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
|
179 | <script src="./dist/example.js"></script>
|
180 | </body>
|
181 | </html>
|