2025-12-27 21:59:58 +08:00
{{template "components/header.html" .}}
{{template "components/preloader.html" .}}
2025-12-26 22:35:18 +08:00
< div id = "main-wrapper" >
<!-- Sidebar Start -->
2025-12-27 21:59:58 +08:00
{{template "components/sidebar.html" .}}
2025-12-26 22:35:18 +08:00
<!-- Sidebar End -->
< div class = "page-wrapper" >
<!-- Header Start -->
2025-12-27 21:59:58 +08:00
{{template "components/topbar.html" .}}
2025-12-26 22:35:18 +08:00
<!-- Header End -->
< div class = "body-wrapper" >
< div class = "container-fluid" >
< div class = "card bg-info-subtle shadow-none position-relative overflow-hidden mb-4" >
< div class = "card-body px-4 py-3" >
< div class = "row align-items-center" >
< div class = "col-9" >
< h4 class = "fw-semibold mb-8" > Custom-Validation< / h4 >
< nav aria-label = "breadcrumb" >
< ol class = "breadcrumb" >
< li class = "breadcrumb-item" >
< a class = "text-muted text-decoration-none" href = "../main/index.html" > Home< / a >
< / li >
< li class = "breadcrumb-item" aria-current = "page" > Custom-Validation< / li >
< / ol >
< / nav >
< / div >
< div class = "col-3" >
< div class = "text-center mb-n5" >
< img src = "../assets/images/breadcrumb/ChatBc.png" alt = "modernize-img" class = "img-fluid mb-n4" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "card" >
< div class = "border-bottom title-part-padding" >
< h4 class = "card-title mb-0" > Validation Form< / h4 >
< / div >
< div class = "card-body" >
< form novalidate >
< div class = "mb-3 form-group" >
< label class = "form-label" > Basic Text Input
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" name = "text" class = "form-control" required data-validation-required-message = "This field is required" / >
< / div >
< div class = "form-control-feedback" >
< small > Add < code > required< / code > attribute to field for
required validation.< / small >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Email Field < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "email" name = "email" class = "form-control" required data-validation-required-message = "This field is required" / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Password Input Field
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "password" name = "password" class = "form-control" required data-validation-required-message = "This field is required" / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Repeat Password Input Field
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "password" name = "password2" data-validation-match-match = "password" class = "form-control" required / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > File Input Field
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "file" name = "file" class = "form-control" required / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Input with Icon < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< div class = "input-group" >
< input type = "text" class = "form-control" placeholder = "Addon To Right" data-validation-required-message = "This field is required" / >
< div class = "input-group-text" >
< span >
< i class = "ti ti-currency-dollar" > < / i >
< / span >
< / div >
< / div >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Maximum Character Length
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" name = "maxChar" class = "form-control" required data-validation-required-message = "This field is required" maxlength = "10" / >
< / div >
< div class = "form-control-feedback" >
< small > Add < code > maxlength='10'< / code > attribute for maximum
number of characters to accept.
< / small >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Minimum Character Length
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" name = "minChar" class = "form-control" required data-validation-required-message = "This field is required" minlength = "6" / >
< / div >
< div class = "form-control-feedback" >
< small > Add < code > minlength="6"< / code > attribute for minimum
number of characters to accept.< / small >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Only Numbers < span class = "text-danger" > *< / span >
< / label >
< div class = "input-group" >
< span class = "input-group-text" >
< i class = "ti ti-currency-dollar fs-5" > < / i >
< / span >
< input type = "number" name = "onlyNum" class = "form-control" required data-validation-required-message = "This field is required" / >
< span class = "input-group-text" > 0.00< / span >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Maximum Number < span class = "text-danger" > *< / span >
< / label >
< input type = "text" name = "maxNum" class = "form-control" required data-validation-required-message = "This field is required" max = "25" / >
< div class = "form-control-feedback" >
< small >
< i > Must be lower than 25< / i >
< / small > -
< small > Add < code > max< / code > attribute for maximum number to
accept. Also use
< code > data-validation-max-message< / code > attribute for
max failure message
< / small >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Minimum Number < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" name = "minNum" class = "form-control" required data-validation-required-message = "This field is required" min = "10" / >
< / div >
< div class = "form-control-feedback" >
< small >
< i > Must be higher than 10< / i >
< / small > -
< small > Add < code > min< / code > attribute for minimum number to
accept. Also use
< code > data-validation-min-message< / code > attribute for
min failure message
< / small >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Text Input Range
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" name = "text" class = "form-control" required data-validation-required-message = "This field is required" minlength = "10" maxlength = "20" placeholder = "Enter number between 10 & 20" / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Input with Button
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< div class = "input-group" >
< input type = "text" class = "form-control" placeholder = "Search" required / >
< button class = "btn btn-primary" type = "button" >
Go!
< / button >
< / div >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > No Characters, Only Numbers
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" name = "noChar" class = "form-control" required data-validation-containsnumber-regex = "(\d)+" data-validation-containsnumber-message = "No Characters Allowed, Only Numbers" / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Pattern < span class = "text-danger" > *< / span >
< small >
< i > Must start with 'a' and end with 'z'< / i >
< / small >
< / label >
< div class = "controls" >
< input type = "text" name = "pattern" pattern = "a.*z" data-validation-pattern-message = "Must start with 'a' and end with 'z'" class = "form-control" required / >
< div class = "form-control-feedback" >
< small > Add < code > pattern< / code > attribute to set input
pattern. Also use
< code > data-validation-pattern-message< / code > attribute
for pattern failure message
< / small >
< / div >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Enter URL < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" class = "form-control" placeholder = "Add URL" data-validation-regex-regex = "((http[s]?|ftp[s]?):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*" data-validation-regex-message = "Only Valid URL's" / >
< div class = "form-control-feedback" >
< small > Add
< code > data-validation-regex-regex< / code > attribute for
regular expression. Also use
< code > data-validation-regex-message< / code > attribute
for regex failure message
< / small >
< / div >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Enter Email Address
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" class = "form-control" placeholder = "Email Address" data-validation-regex-regex = "([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})" data-validation-regex-message = "Enter Valid Email" / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Enter Date < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< input type = "text" class = "form-control" placeholder = "MM/DD/YYYY" data-validation-regex-regex = "([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})" data-validation-regex-message = "Enter Valid Email" / >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Basic Select < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< select name = "select" id = "select" required class = "form-select form-control" >
< option value = "" > Select Your City< / option >
< option value = "1" > India< / option >
< option value = "2" > USA< / option >
< option value = "3" > UK< / option >
< option value = "4" > Canada< / option >
< option value = "5" > Dubai< / option >
< / select >
< / div >
< / div >
< div class = "mb-3 form-group" >
< label class = "form-label" > Textarea < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< textarea name = "textarea" id = "textarea" class = "form-control" required placeholder = "Textarea text" > < / textarea >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-6" >
< div class = "mb-3 form-group" >
< label class = "form-label" > Checkbox < span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< div class = "form-check" >
< input type = "checkbox" required value = "single" class = "form-check-input" id = "customCheck1" / >
< label class = "form-check-label" for = "customCheck1" > Check this custom checkbox< / label >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "mb-3 form-group" >
< label class = "form-label" > Checkbox Group
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" value = "x" name = "styled_checkbox" required class = "form-check-input" id = "customCheck2" / >
< label class = "form-check-label" for = "customCheck2" > I am unchecked< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" value = "y" name = "styled_checkbox" class = "form-check-input" id = "customCheck3" / >
< label class = "form-check-label" for = "customCheck3" > I am unchecked too< / label >
< / div >
< / fieldset >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-6" >
< div class = "mb-3 form-group" >
< label class = "form-label" > Select Max 2 Checkbox< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" name = "styled_max_checkbox" data-validation-maxchecked-maxchecked = "2" data-validation-maxchecked-message = "Don't be greedy!" required class = "form-check-input" id = "customCheck4" / >
< label class = "form-check-label" for = "customCheck4" > I am unchecked checkbox< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" name = "styled_max_checkbox" class = "form-check-input" id = "customCheck5" / >
< label class = "form-check-label" for = "customCheck5" > I am unchecked too< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" name = "styled_max_checkbox" class = "form-check-input" id = "customCheck6" / >
< label class = "form-check-label" for = "customCheck6" > You can check me< / label >
< / div >
< / fieldset >
< / div >
< small > Select any 2 options< / small >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "mb-3 form-group" >
< label class = "form-label" > Minimum 2 Checkbox selection< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" value = "1" data-validation-minchecked-minchecked = "2" data-validation-minchecked-message = "Choose at least two" name = "styled_min_checkbox" required class = "form-check-input" id = "customCheck7" / >
< label class = "form-check-label" for = "customCheck7" > I am unchecked checkbox< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" value = "2" name = "styled_min_checkbox" class = "form-check-input" id = "customCheck8" / >
< label class = "form-check-label" for = "customCheck8" > I am unchecked checkbox too< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "checkbox" value = "3" name = "styled_min_checkbox" class = "form-check-input" id = "customCheck9" / >
< label class = "form-check-label" for = "customCheck9" > You can check me< / label >
< / div >
< / fieldset >
< / div >
< small > Select any 2 options< / small >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-6" >
< div class = "mb-3 form-group" >
< label class = "form-label" > Radio Buttons
< span class = "text-danger" > *< / span >
< / label >
< fieldset class = "controls" >
< div class = "form-check py-2" >
< input type = "radio" value = "1" name = "styled_radio" required id = "styled_radio1" class = "form-check-input" / >
< label class = "form-check-label" for = "styled_radio1" > Check me< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "radio" value = "2" name = "styled_radio" id = "styled_radio2" class = "form-check-input" / >
< label class = "form-check-label" for = "styled_radio2" > or me< / label >
< / div >
< / fieldset >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "mb-3 form-group" >
< label class = "form-label" > Inline Radio Buttons
< span class = "text-danger" > *< / span >
< / label >
< div class = "controls" >
< fieldset >
< div class = "form-check py-2" >
< input type = "radio" value = "Yes" name = "styled_inline_radio" required id = "styled_radio_inline1" class = "form-check-input" / >
< label class = "form-check-label" for = "styled_radio_inline1" > Check me< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "form-check py-2" >
< input type = "radio" value = "No" name = "styled_inline_radio" id = "styled_radio_inline2" class = "form-check-input" / >
< label class = "form-check-label" for = "styled_radio_inline2" > or me< / label >
< / div >
< / fieldset >
< / div >
< / div >
< / div >
< / div >
< div class = "d-flex flex-wrap gap-6" >
< button type = "submit" class = "btn btn-primary" >
Submit
< / button >
< button type = "reset" class = "btn bg-danger-subtle text-danger" >
Cancel
< / button >
< / div >
< / form >
< / div >
< / div >
< / div >
< / div >
< / div >
<!-- Search Bar -->
< div class = "modal fade" id = "exampleModal" tabindex = "-1" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-lg" >
< div class = "modal-content rounded-1" >
< div class = "modal-header border-bottom" >
< input type = "search" class = "form-control fs-3" placeholder = "Search here" id = "search" / >
< a href = "javascript:void(0)" data-bs-dismiss = "modal" class = "lh-1" >
< i class = "ti ti-x fs-5 ms-3" > < / i >
< / a >
< / div >
< div class = "modal-body message-body" data-simplebar = "" >
< h5 class = "mb-0 fs-5 p-1" > Quick Page Links< / h5 >
< ul class = "list mb-0 py-2" >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Modern< / span >
< span class = "text-muted d-block" > /dashboards/dashboard1< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Dashboard< / span >
< span class = "text-muted d-block" > /dashboards/dashboard2< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Contacts< / span >
< span class = "text-muted d-block" > /apps/contacts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Posts< / span >
< span class = "text-muted d-block" > /apps/blog/posts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Detail< / span >
< span class = "text-muted d-block" > /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Shop< / span >
< span class = "text-muted d-block" > /apps/ecommerce/shop< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Modern< / span >
< span class = "text-muted d-block" > /dashboards/dashboard1< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Dashboard< / span >
< span class = "text-muted d-block" > /dashboards/dashboard2< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Contacts< / span >
< span class = "text-muted d-block" > /apps/contacts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Posts< / span >
< span class = "text-muted d-block" > /apps/blog/posts< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Detail< / span >
< span class = "text-muted d-block" > /apps/blog/detail/streaming-video-way-before-it-was-cool-go-dark-tomorrow< / span >
< / a >
< / li >
< li class = "p-1 mb-1 bg-hover-light-black" >
< a href = "javascript:void(0)" >
< span class = "d-block" > Shop< / span >
< span class = "text-muted d-block" > /apps/ecommerce/shop< / span >
< / a >
< / li >
< / ul >
< / div >
< / div >
< / div >
< / div >
<!-- Shopping Cart -->
< div class = "offcanvas offcanvas-end shopping-cart" tabindex = "-1" id = "offcanvasRight" aria-labelledby = "offcanvasRightLabel" >
< div class = "offcanvas-header justify-content-between py-4" >
< h5 class = "offcanvas-title fs-5 fw-semibold" id = "offcanvasRightLabel" >
Shopping Cart
< / h5 >
< span class = "badge bg-primary rounded-4 px-3 py-1 lh-sm" > 5 new< / span >
< / div >
< div class = "offcanvas-body h-100 px-4 pt-0" data-simplebar >
< ul class = "mb-0" >
< li class = "pb-7" >
< div class = "d-flex align-items-center" >
< img src = "../assets/images/products/product-1.jpg" width = "95" height = "75" class = "rounded-1 me-9 flex-shrink-0" alt = "modernize-img" / >
< div >
< h6 class = "mb-1" > Supreme toys cooker< / h6 >
< p class = "mb-0 text-muted fs-2" > Kitchenware Item< / p >
< div class = "d-flex align-items-center justify-content-between mt-2" >
< h6 class = "fs-2 fw-semibold mb-0 text-muted" > $250< / h6 >
< div class = "input-group input-group-sm w-50" >
< button class = "btn border-0 round-20 minus p-0 bg-success-subtle text-success" type = "button" id = "add1" >
-
< / button >
< input type = "text" class = "form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "add1" value = "1" / >
< button class = "btn text-success bg-success-subtle p-0 round-20 border-0 add" type = "button" id = "addo2" >
+
< / button >
< / div >
< / div >
< / div >
< / div >
< / li >
< li class = "pb-7" >
< div class = "d-flex align-items-center" >
< img src = "../assets/images/products/product-2.jpg" width = "95" height = "75" class = "rounded-1 me-9 flex-shrink-0" alt = "modernize-img" / >
< div >
< h6 class = "mb-1" > Supreme toys cooker< / h6 >
< p class = "mb-0 text-muted fs-2" > Kitchenware Item< / p >
< div class = "d-flex align-items-center justify-content-between mt-2" >
< h6 class = "fs-2 fw-semibold mb-0 text-muted" > $250< / h6 >
< div class = "input-group input-group-sm w-50" >
< button class = "btn border-0 round-20 minus p-0 bg-success-subtle text-success" type = "button" id = "add2" >
-
< / button >
< input type = "text" class = "form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "add2" value = "1" / >
< button class = "btn text-success bg-success-subtle p-0 round-20 border-0 add" type = "button" id = "addon34" >
+
< / button >
< / div >
< / div >
< / div >
< / div >
< / li >
< li class = "pb-7" >
< div class = "d-flex align-items-center" >
< img src = "../assets/images/products/product-3.jpg" width = "95" height = "75" class = "rounded-1 me-9 flex-shrink-0" alt = "modernize-img" / >
< div >
< h6 class = "mb-1" > Supreme toys cooker< / h6 >
< p class = "mb-0 text-muted fs-2" > Kitchenware Item< / p >
< div class = "d-flex align-items-center justify-content-between mt-2" >
< h6 class = "fs-2 fw-semibold mb-0 text-muted" > $250< / h6 >
< div class = "input-group input-group-sm w-50" >
< button class = "btn border-0 round-20 minus p-0 bg-success-subtle text-success" type = "button" id = "add3" >
-
< / button >
< input type = "text" class = "form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty" placeholder = "" aria-label = "Example text with button addon" aria-describedby = "add3" value = "1" / >
< button class = "btn text-success bg-success-subtle p-0 round-20 border-0 add" type = "button" id = "addon3" >
+
< / button >
< / div >
< / div >
< / div >
< / div >
< / li >
< / ul >
< div class = "align-bottom" >
< div class = "d-flex align-items-center pb-7" >
< span class = "text-dark fs-3" > Sub Total< / span >
< div class = "ms-auto" >
< span class = "text-dark fw-semibold fs-3" > $2530< / span >
< / div >
< / div >
< div class = "d-flex align-items-center pb-7" >
< span class = "text-dark fs-3" > Total< / span >
< div class = "ms-auto" >
< span class = "text-dark fw-semibold fs-3" > $6830< / span >
< / div >
< / div >
< a href = "../main/eco-checkout.html" class = "btn btn-outline-primary w-100" > Go to shopping cart< / a >
< / div >
< / div >
< / div >
< / div >
2025-12-27 21:59:58 +08:00
{{template "components/footer.html" .}}
2025-12-26 22:35:18 +08:00
2025-12-27 02:50:16 +08:00
2025-12-26 22:35:18 +08:00
< script src = "../assets/js/extra-libs/jqbootstrapvalidation/validation.js" > < / script >
< script src = "../assets/js/forms/custom-validation-init.js" > < / script >
