1 module source.uim.bootstrap.bs5.demos.forms.validation; 2 3 import uim.bootstrap; 4 5 static this() { 6 demoBS5.pages("basic/forms/validation", new class DH5AppPage { 7 this() { 8 super(); 9 this 10 .created(DateTime(2020, 12, 20, 10, 10, 0)) 11 .changed(timeLastModified(__FILE_FULL_PATH__)) 12 .parameters([ 13 "pageTitle": "Validation - Bootstrap 5 Demo", 14 ]); 15 } 16 17 override string content() { 18 19 auto defaultsExample = demoBs5Example("defaults", "Browser defaults", 20 H5Div( 21 H5Form("formValidationDefault", [""], 22 H5Div(["mb-3"], 23 H5Label(["for":"validationDefaultText"], "Text input"), 24 BS5InputText("validationDefaultText", ["required":"required"]), 25 ), 26 H5Div(["mb-3"], 27 BS5InputGroup( 28 H5Span("validationDefaultInputGroup", ["input-group-text"], "$"), 29 BS5InputNumber(["aria-label":"Amount", "aria-describedby":"validationDefaultInputGroup", "required":"required"]), 30 ) 31 ), 32 H5Div(["mb-3"], 33 H5Label(["for":"validationDefaultTextarea"], "Textarea"), 34 H5Textarea("validationDefaultTextarea", ["form-control"], ["rows":"5", "placeholder":"Write your message here.", "required":"required"]) 35 ), 36 H5Div(["mb-3"], 37 H5Label(["for":"validationDefaultSelect"], "Select one"), 38 BS5InputSelect("validationDefaultSelect", ["required":"required"], 39 H5Option(["value":""], "Select"), 40 H5Option(["value":"1"], "Option one"), 41 H5Option(["value":"2"], "Option two"), 42 H5Option(["value":"3"], "Option three") 43 ) 44 ), 45 H5Div(["mb-3"], 46 H5Div(["form-check"], 47 H5Input("validationDefaultCheck", ["form-check-input"], ["type":"checkbox", "required":"required"]), 48 BS5FormCheckLabel(["for":"validationDefaultCheck"], "Checkbox") 49 ) 50 ), 51 H5Div(["mb-3"], 52 H5Div(["form-check"], 53 H5Input("validationDefaultRadio1", ["form-check-input"], ["type":"radio", "name":"validationDefaultRadio", "required":"required"]), 54 BS5FormCheckLabel(["for":"validationDefaultRadio1"], "Radio") 55 ), 56 H5Div(["form-check"], 57 H5Input("validationDefaultRadio2", ["form-check-input"], ["type":"radio", "name":"validationDefaultRadio", "required":"required"]), 58 BS5FormCheckLabel(["for":"validationDefaultRadio2"], "Radio") 59 ) 60 ), 61 H5Div(["mb-3"], 62 BS5FormCheck(["form-switch"], 63 H5Input("validationDefaultSwitch", ["form-check-input"], ["type":"checkbox", "required":"required"]), 64 BS5FormCheckLabel(["for":"validationDefaultSwitch"], "Switch") 65 ) 66 ), 67 H5Div(["mb-3"], 68 BS5FormFile( 69 H5Input("validationDefaultFile", ["form-file-input"], ["type":"file", "required":"required"]), 70 BS5FormFileLabel(["for":"validationDefaultFile"], 71 BS5FormFileText("Choose file..."), 72 BS5FormFileButton("Browse")) 73 ) 74 ), 75 H5Button(["btn btn-primary"], ["type":"submit"], "Submit form") 76 ) 77 ), ``, ``); 78 79 auto clientSizeExample = demoBs5Example("client", "Client side", 80 H5Div( 81 H5Form("formValidationClient", ["needs-validation"], ["novalidate":"novalidate"], 82 H5Div(["mb-3"], 83 H5Label(["for":"validationClientText"], "Text input"), 84 BS5InputText("validationClientText", ["required":"required"]), 85 H5P(["valid-feedback"], "Valid feedback text"), 86 H5P(["invalid-feedback"], "Invalid feedback text") 87 ), 88 H5Div(["mb-3"], 89 BS5InputGroup( 90 H5Span("validationClientInputGroup", ["input-group-text"], "$"), 91 H5Input(["form-control"], ["type":"number", "aria-label":"Amount", "aria-describedby":"validationClientInputGroup", "required":"required"]), 92 H5P(["valid-feedback"], "Valid feedback text"), 93 H5P(["invalid-feedback"], "Invalid feedback text") 94 ) 95 ), 96 H5Div(["mb-3"], 97 H5Label(["for":"validationClientTextarea"], "Textarea"), 98 H5Textarea("validationClientTextarea", ["form-control"], ["rows":"5", "placeholder":"Write your message here.", "required":"required"]), 99 H5P(["valid-feedback"], "Valid feedback text"), 100 H5P(["invalid-feedback"], "Invalid feedback text") 101 ), 102 H5Div(["mb-3"], 103 H5Label(["for":"validationClientSelect"], "Select one"), 104 BS5InputSelect("validationClientSelect", ["required":"required"], 105 H5Option(["value":""], "Select"), 106 H5Option(["value":"1"], "Option one"), 107 H5Option(["value":"2"], "Option two"), 108 H5Option(["value":"3"], "Option three") 109 ), 110 H5P(["valid-feedback"], "Valid feedback text"), 111 H5P(["invalid-feedback"], "Invalid feedback text") 112 ), 113 H5Div(["mb-3"], 114 H5Div(["form-check"], 115 H5Input("validationClientCheck", ["form-check-input"], ["type":"checkbox", "required":"required"]), 116 BS5FormCheckLabel(["for":"validationClientCheck"], "Checkbox"), 117 H5P(["valid-feedback"], "Valid feedback text"), 118 H5P(["invalid-feedback"], "Invalid feedback text") 119 ) 120 ), 121 H5Div(["mb-3"], 122 H5Div(["form-check"], 123 H5Input("validationClientRadio1", ["form-check-input"], ["type":"radio", "name":"validationClientRadio", "required":"required"]), 124 BS5FormCheckLabel(["for":"validationClientRadio1"], "Radio") 125 ), 126 H5Div(["form-check"], 127 H5Input("validationClientRadio2", ["form-check-input"], ["type":"radio", "name":"validationClientRadio" , "required":"required"]), 128 BS5FormCheckLabel(["for":"validationClientRadio2"], "Radio"), 129 H5P(["valid-feedback"], "Valid feedback text"), 130 H5P(["invalid-feedback"], "Invalid feedback text") 131 ) 132 ), 133 H5Div(["mb-3"], 134 H5Div(["form-check form-switch"], 135 H5Input("validationClientSwitch", ["form-check-input"], ["type":"checkbox", "required":"required"]), 136 BS5FormCheckLabel(["for":"validationClientSwitch"], "Switch"), 137 H5P(["valid-feedback"], "Valid feedback text"), 138 H5P(["invalid-feedback"], "Invalid feedback text") 139 ) 140 ), 141 H5Div(["mb-3"], 142 H5Div(["form-file"], 143 H5Input("validationClientFile", ["form-file-input"], ["type":"file", "required":"required"]), 144 BS5FormFileLabel(["for":"validationClientFile"], 145 BS5FormFileText("Choose file..."), 146 BS5FormFileButton("Browse") 147 ), 148 H5P(["valid-feedback"], "Valid feedback text"), 149 H5P(["invalid-feedback"], "Invalid feedback text") 150 ) 151 ), 152 H5Button(["btn btn-primary"], ["type":"submit"], "Submit form") 153 ) 154 ), ``, ``); 155 156 auto serverExample = demoBs5Example("server", "Server side", 157 H5Div( 158 H5Form("formValidationServer", [""], 159 H5Div(["mb-3"], 160 H5Label(["for":"validationServerText"], "Text input"), 161 BS5InputText("validationServerText", ["is-valid"]), 162 H5P(["valid-feedback"], "Valid feedback text"), 163 H5P(["invalid-feedback"], "Invalid feedback text"), 164 ), 165 H5Div(["mb-3"], 166 BS5InputGroup( 167 H5Span("validationServerInputGroup", ["input-group-text"], "$"), 168 H5Input(["form-control", "is-invalid"], ["type":"number", "aria-label":"Amount", "aria-describedby":"validationServerInputGroup"]), 169 H5P(["valid-feedback"], "Valid feedback text"), 170 H5P(["invalid-feedback"], "Invalid feedback text") 171 ) 172 ), 173 H5Div(["mb-3"], 174 H5Label(["for":"validationServerTextarea"], "Textarea"), 175 H5Textarea("validationServerTextarea", ["form-control", "is-valid"], ["rows":"5", "placeholder":"Write your message here."]), 176 H5P(["valid-feedback"], "Valid feedback text"), 177 H5P(["invalid-feedback"], "Invalid feedback text"), 178 ), 179 H5Div(["mb-3"], 180 H5Label(["for":"validationServerSelect"], "Select one"), 181 BS5InputSelect("validationServerSelect", ["is-invalid"], 182 H5Option(["value":""], "Select"), 183 H5Option(["value":"1"], "Option one"), 184 H5Option(["value":"2"], "Option two"), 185 H5Option(["value":"3"], "Option three") 186 ), 187 H5P(["valid-feedback"], "Valid feedback text"), 188 H5P(["invalid-feedback"], "Invalid feedback text") 189 ), 190 H5Div(["mb-3"], 191 H5Div(["form-check"], 192 H5Input("validationServerCheck", ["form-check-input", "is-valid"], ["type":"checkbox"]), 193 BS5FormCheckLabel(["for":"validationServerCheck"], "Checkbox"), 194 H5P(["valid-feedback"], "Valid feedback text"), 195 H5P(["invalid-feedback"], "Invalid feedback text") 196 ) 197 ), 198 H5Div(["mb-3"], 199 H5Div(["form-check"], 200 H5Input("validationServerRadio1", ["form-check-input", "is-invalid"], ["type":"radio", "name":"validationServerRadio"]), 201 BS5FormCheckLabel(["for":"validationServerRadio1"], "Radio") 202 ), 203 H5Div(["form-check"], 204 H5Input("validationServerRadio2", ["form-check-input", "is-invalid"], ["type":"radio", "name":"validationServerRadio"]), 205 BS5FormCheckLabel(["for":"validationServerRadio2"], "Radio"), 206 H5P(["valid-feedback"], "Valid feedback text"), 207 H5P(["invalid-feedback"], "Invalid feedback text") 208 ) 209 ), 210 H5Div(["mb-3"], 211 H5Div(["form-check form-switch"], 212 H5Input("validationServerSwitch", ["form-check-input is-valid"], ["type":"checkbox"]), 213 BS5FormCheckLabel(["for":"validationServerSwitch"], "Switch"), 214 H5P(["valid-feedback"], "Valid feedback text"), 215 H5P(["invalid-feedback"], "Invalid feedback text") 216 ) 217 ), 218 H5Div(["mb-3"], 219 H5Div(["form-file"], 220 H5Input("validationServerFile", ["form-file-input is-invalid"], ["type":"file"]), 221 BS5FormFileLabel(["for":"validationServerFile"], 222 BS5FormFileText("Choose file..."), 223 BS5FormFileButton("Browse") 224 ), 225 H5P(["valid-feedback"], "Valid feedback text"), 226 H5P(["invalid-feedback"], "Invalid feedback text") 227 ) 228 ), 229 H5Button(["btn btn-primary"], ["type":"submit"], "Submit form") 230 ) 231 ), ``, ``); 232 233 234 auto tooltipsExample = demoBs5Example("tooltips", "Tooltips", 235 H5Div( 236 H5Form("formValidationTooltips", ["needs-validation"], ["novalidate":"novalidate"], 237 H5Div(["mb-3", "position-relative"], 238 H5Label(["for":"validationTooltipsText"], "Text input"), 239 BS5InputText("validationTooltipsText", ["required":"required"]), 240 H5P(["valid-tooltip"], "Valid feedback text"), 241 H5P(["invalid-tooltip"], "Invalid feedback text") 242 ), 243 H5Div(["mb-3", "position-relative"], 244 BS5InputGroup( 245 H5Span("validationTooltipsInputGroup", ["input-group-text"], "$"), 246 BS5InputNumber(["aria-label":"Amount", "aria-describedby":"validationTooltipsInputGroup", "required":"required"]), 247 H5P(["valid-tooltip"], "Valid feedback text"), 248 H5P(["invalid-tooltip"], "Invalid feedback text") 249 ) 250 ), 251 H5Div(["mb-3", "position-relative"], 252 H5Label(["for":"validationTooltipsTextarea"], "Textarea"), 253 H5Textarea("validationTooltipsTextarea", ["form-control"], ["rows":"5", "placeholder":"Write your message here.", "required":"required"]), 254 H5P(["valid-tooltip"], "Valid feedback text"), 255 H5P(["invalid-tooltip"], "Invalid feedback text") 256 ), 257 H5Div(["mb-3", "position-relative"], 258 H5Label(["for":"validationTooltipsSelect"], "Select one"), 259 BS5InputSelect("validationTooltipsSelect", ["required":"required"], 260 H5Option(["value":""], "Select"), 261 H5Option(["value":"1"], "Option one"), 262 H5Option(["value":"2"], "Option two"), 263 H5Option(["value":"3"], "Option three") 264 ), 265 H5P(["valid-tooltip"], "Valid feedback text"), 266 H5P(["invalid-tooltip"], "Invalid feedback text") 267 ), 268 H5Div(["mb-3", "position-relative"], 269 H5Div(["form-check"], 270 H5Input("validationTooltipsCheck", ["form-check-input"], ["type":"checkbox", "required":"required"]), 271 BS5FormCheckLabel(["for":"validationTooltipsCheck"], "Checkbox"), 272 H5P(["valid-tooltip"], "Valid feedback text"), 273 H5P(["invalid-tooltip"], "Invalid feedback text") 274 ) 275 ), 276 H5Div(["mb-3", "position-relative"], 277 H5Div(["form-check"], 278 H5Input("validationTooltipsRadio1", ["form-check-input"], ["type":"radio", "name":"validationTooltipsRadio", "required":"required"]), 279 BS5FormCheckLabel(["for":"validationTooltipsRadio1"], "Radio") 280 ), 281 H5Div(["form-check"], 282 H5Input("validationTooltipsRadio2", ["form-check-input"], ["type":"radio", "name":"validationTooltipsRadio", "required":"required"]), 283 BS5FormCheckLabel(["for":"validationTooltipsRadio2"], "Radio"), 284 H5P(["valid-tooltip"], "Valid feedback text"), 285 H5P(["invalid-tooltip"], "Invalid feedback text") 286 ) 287 ), 288 H5Div(["mb-3", "position-relative"], 289 H5Div(["form-check form-switch"], 290 H5Input("validationTooltipsSwitch", ["form-check-input"], ["type":"checkbox", "required":"required"]), 291 BS5FormCheckLabel(["for":"validationTooltipsSwitch"], "Switch"), 292 H5P(["valid-tooltip"], "Valid feedback text"), 293 H5P(["invalid-tooltip"], "Invalid feedback text") 294 ) 295 ), 296 H5Div(["mb-3", "position-relative"], 297 H5Div(["form-file"], 298 H5Input("validationTooltipsFile", ["form-file-input"], ["type":"file", "required":"required"]), 299 BS5FormFileLabel(["for":"validationTooltipsFile"], 300 BS5FormFileText("Choose file..."), 301 BS5FormFileButton("Browse") 302 ), 303 H5P(["valid-tooltip"], "Valid feedback text"), 304 H5P(["invalid-tooltip"], "Invalid feedback text") 305 ) 306 ), 307 H5Button(["btn", "btn-primary"], ["type":"submit"], "Submit form") 308 ) 309 ), ``, ``); 310 311 312 return 313 H5Main(["style":"margin-top:70px;"], 314 H5Div(["container-fluid", "mt-3", "bg-light"], 315 bs5Breadcrumbs(["/", "/demos", "/demos/uim-bootstrap", "/demos/uim-bootstrap/5/", "/demos/uim-bootstrap/5/basic/", "/demos/uim-bootstrap/5/basic/forms"], 316 ["UI Manufaktur", "Demos", "uim-bootstrap", "Bootstrap 5", "Basic", "Forms"], "Validation")), 317 318 BS5Container(["mt-3"]).row( 319 H5Div(["col-12", "col-lg-2"], 320 listLevels("basic"), 321 listAreas("basic", "forms"), 322 listSections("basic", "forms", "validation")), 323 H5Div(["col-12", "col-lg-8"], 324 dateInfo(this), 325 H5H2(["display-4"], "Validation"), 326 H5Hr, 327 328 defaultsExample, 329 clientSizeExample, 330 serverExample, 331 tooltipsExample 332 333 ), 334 H5Div(["col-12", "col-lg-2"]))).toString; 335 } 336 }); 337 } 338 339