- var theme_customizer       = true;
- var form_validation_custom = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                    h3
                                      | Validation Forms
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Forms   
                                      li.breadcrumb-item Form Controls
                                      li.breadcrumb-item.active Validation Forms
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 Custom styles
                              span
                                | For custom Bootstrap form validation messages, you’ll need to add the 
                                code.text-danger novalidate
                                |  boolean attribute to your 
                                code.text-danger &lt;form&gt;
                                | . This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you.
                              span
                                | When attempting to submit, you’ll see the 
                                code.text-danger :invalid 
                                |  and 
                                code.text-danger :valid 
                                |  styles applied to your form controls.
                            .card-body
                              form.needs-validation(novalidate='')
                                .row.g-3
                                  .col-md-4
                                    label.form-label(for='validationCustom01') First name
                                    input#validationCustom01.form-control(type='text' value='Mark' required='')
                                    .valid-feedback
                                      | Looks good!
                                  .col-md-4
                                    label.form-label(for='validationCustom02') Last name
                                    input#validationCustom02.form-control(type='text' value='Otto' required='')
                                    .valid-feedback
                                      | Looks good!
                                  .col-md-4.mb-3
                                    label.form-label(for='validationCustomUsername') Username
                                    .input-group
                                      span#inputGroupPrepend.input-group-text @
                                      input#validationCustomUsername.form-control(type='text' placeholder='Username' aria-describedby='inputGroupPrepend' required='')
                                      .invalid-feedback
                                        | Please choose a username.
                                .row.g-3
                                  .col-md-6
                                    label.form-label(for='validationCustom03') City
                                    input#validationCustom03.form-control(type='text' placeholder='City' required='')
                                    .invalid-feedback
                                      | Please provide a valid city.
                                  .col-md-3
                                    label.form-label(for='validationCustom04') State
                                    select#validationCustom04.form-select(required='')
                                      option(selected='' disabled='' value='') Choose...
                                      option ...
                                    .invalid-feedback
                                      | Please select a valid state.
                                  .col-md-3.mb-3
                                    label.form-label(for='validationCustom05') Zip
                                    input#validationCustom05.form-control(type='text' placeholder='Zip' required='')
                                    .invalid-feedback
                                      | Please provide a valid zip.
                                .mb-3
                                  .form-check
                                    .checkbox.p-0
                                      input#invalidCheck.form-check-input(type='checkbox' required='')
                                      label.form-check-label(for='invalidCheck') Agree to terms and conditions
                                    .invalid-feedback
                                      | You must agree before submitting.
                                button.btn.btn-primary(type='submit') Submit form
                          .card
                            .card-header.pb-0
                              h5 Browser defaults
                              span
                                | Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
                              span
                                | While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
                            .card-body
                              form
                                .row.g-3
                                  .col-md-4
                                    label.form-label(for='validationDefault01') First name
                                    input#validationDefault01.form-control(type='text' placeholder='First name' required='')
                                  .col-md-4
                                    label.form-label(for='validationDefault02') Last name
                                    input#validationDefault02.form-control(type='text' placeholder='Last name' required='')
                                  .col-md-4.mb-3
                                    label.form-label(for='validationDefaultUsername') Username
                                    .input-group
                                      span#inputGroupPrepend2.input-group-text @
                                      input#validationDefaultUsername.form-control(type='text' placeholder='Username' aria-describedby='inputGroupPrepend2' required='')
                                .row.g-3
                                  .col-md-6
                                    label.form-label(for='validationDefault03') City
                                    input#validationDefault03.form-control(type='text' placeholder='City' required='')
                                  .col-md-3
                                    label.form-label(for='validationDefault04') State
                                    select#validationDefault04.form-select(required='')
                                      option(selected='' disabled='' value='') Choose...
                                      option ...
                                  .col-md-3.mb-3
                                    label.form-label(for='validationDefault05') Zip
                                    input#validationDefault05.form-control(type='text' placeholder='Zip' required='')
                                .mb-3
                                  .form-check
                                    .checkbox.p-0
                                      input#invalidCheck2.form-check-input(type='checkbox' required='')
                                      label.form-check-label(for='invalidCheck2') Agree to terms and conditions
                                button.btn.btn-primary(type='submit') Submit form
                          .card
                            .card-header.pb-0
                              h5 Supported elements
                              span
                                | Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? All good, you can use the browser defaults. Try submitting the form below. Depending on your browser and OS, you’ll see a slightly different style of feedback.
                              span
                                | While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
                            .card-body
                              form.was-validated
                                .mb-3
                                  label.form-label(for='validationTextarea') Textarea
                                  textarea#validationTextarea.form-control.is-invalid(placeholder='Required example textarea' required='')
                                  .invalid-feedback
                                    | Please enter a message in the textarea.
                                .form-check.mb-3
                                  input#validationFormCheck1.form-check-input(type='checkbox' required='')
                                  label.form-check-label(for='validationFormCheck1') Check this checkbox
                                  .invalid-feedback Example invalid feedback text
                                .form-check
                                  input#validationFormCheck2.form-check-input(type='radio' name='radio-stacked' required='')
                                  label.form-check-label(for='validationFormCheck2') Toggle this radio
                                .form-check.mb-3
                                  input#validationFormCheck3.form-check-input(type='radio' name='radio-stacked' required='')
                                  label.form-check-label(for='validationFormCheck3') Or toggle this other radio
                                  .invalid-feedback More example invalid feedback text
                                .mb-3
                                  select.form-select(required='' aria-label='select example')
                                    option(value='') Open this select menu
                                    option(value='1') One
                                    option(value='2') Two
                                    option(value='3') Three
                                  .invalid-feedback Example invalid select feedback
                                div
                                  input.form-control(type='file' aria-label='file example' required='')
                                  .invalid-feedback Example invalid form file feedback

                          .card
                            .card-header.pb-0
                              h5 Tooltips
                              span
                                | If your form layout allows it, you can swap the 
                                code.text-danger .{valid|invalid}-feedback
                                |  classes for 
                                code.text-danger .{valid|invalid}-tooltip
                                |  classes to display validation feedback in a styled tooltip. Be sure to have a parent with 
                                code.text-danger position: relative
                                |  on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
                            .card-body
                              form.row.g-3.needs-validation(novalidate='')
                                .col-md-4.position-relative
                                  label.form-label(for='validationTooltip01') First name
                                  input#validationTooltip01.form-control(type='text' value='Mark' required='')
                                  .valid-tooltip
                                    | Looks good!
                                .col-md-4.position-relative
                                  label.form-label(for='validationTooltip02') Last name
                                  input#validationTooltip02.form-control(type='text' value='Otto' required='')
                                  .valid-tooltip
                                    | Looks good!
                                .col-md-4.position-relative
                                  label.form-label(for='validationTooltipUsername') Username
                                  .input-group.has-validation
                                    span#validationTooltipUsernamePrepend.input-group-text @
                                    input#validationTooltipUsername.form-control(type='text' aria-describedby='validationTooltipUsernamePrepend' required='')
                                    .invalid-tooltip
                                      | Please choose a unique and valid username.
                                .col-md-6.position-relative
                                  label.form-label(for='validationTooltip03') City
                                  input#validationTooltip03.form-control(type='text' required='')
                                  .invalid-tooltip
                                    | Please provide a valid city.
                                .col-md-3.position-relative
                                  label.form-label(for='validationTooltip04') State
                                  select#validationTooltip04.form-select(required='')
                                    option(selected='' disabled='' value='') Choose...
                                    option ...
                                  .invalid-tooltip
                                    | Please select a valid state.
                                .col-md-3.position-relative
                                  label.form-label(for='validationTooltip05') Zip
                                  input#validationTooltip05.form-control(type='text' required='')
                                  .invalid-tooltip
                                    | Please provide a valid zip.
                                .col-12
                                  button.btn.btn-primary(type='submit') Submit form
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files
