- var theme_customizer      = true;
- var form_validation_custom= true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;

doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Validation Form
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item  Form Controls
                    li.breadcrumb-item.active  Validation Forms
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12
                .card
                  .card-header
                    h4 Tooltip form validation
                    p.f-m-light.mt-1 
                      | If your form layout allows it, you can swap the 
                      code .{valid|invalid}
                      | -feedback classes for
                      code .{valid|invalid}
                      | -tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with 
                      code position: relative
                      |  on it for tooltip positioning.
                  .card-body
                    form.row.g-3.needs-validation.custom-input(novalidate='')
                      .col-md-4.position-relative
                        label.form-label(for='validationTooltip01') First name
                        input#validationTooltip01.form-control(type='text' placeholder="Mark" required='')
                        .valid-tooltip
                          | Looks good!
                      .col-md-4.position-relative
                        label.form-label(for='validationTooltip02') Last name
                        input#validationTooltip02.form-control(type='text' placeholder="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 U.S 
                          option Thailand 
                          option India 
                          option U.K
                        .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
              .col-xl-6
                .card.height-equal
                  .card-header
                    h4 Browser defaults
                    p.f-m-light.mt-1 
                      | Not interested in custom validation feedback messages or writing JavaScript to change form behaviors? Depending on your browser and OS,While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.
                  .card-body.custom-input
                    form.row.g-3
                      .col-12 
                        label.form-label(for='first-name') First name
                        input#first-name.form-control(type='text' placeholder='First name' aria-label='First name' required)
                      .col-12
                        label.form-label(for='exampleFormControlInput1') Email address
                        input#exampleFormControlInput1.form-control(type='email' placeholder='pesamof475@saeoil.com' required)
                      .col-12 
                        label.col-sm-12.col-form-label(for='inputPassword2') Password
                        input#inputPassword2.form-control(type='password' required)
                      .col-12 
                        label.form-label(for='validationDefault04') State
                        select#validationDefault04.form-select(required='')
                          option(selected='' disabled='' value='') Choose...
                          option U.K 
                          option Thailand
                          option India 
                          option U.S
                      .col-12 
                        label.form-label(for='formFile') Choose file
                        input#formFile.form-control(type='file' required)
                      .col-12 
                        .card-wrapper.border.rounded-3.checkbox-checked
                          h6.sub-title Select your payment method
                          .radio-form
                            .form-check
                              input#flexRadioDefault1.form-check-input(type='radio' name='flexRadioDefault' required='')
                              label.form-check-label(for='flexRadioDefault1')
                                | Visa
                            .form-check
                              input#flexRadioDefault2.form-check-input(type='radio' name='flexRadioDefault' checked='' required='')
                              label.form-check-label(for='flexRadioDefault2')
                                | MasterCard
                            .form-check
                              input#flexRadioDefault3.form-check-input(type='radio' name='flexRadioDefault' checked='' required='')
                              label.form-check-label(for='flexRadioDefault3')
                                | Paypal
                      .col-12 
                        label.form-label(for='exampleFormControlTextarea1') Description
                        textarea#exampleFormControlTextarea1.form-control(rows='3')
                      .col-12.checkbox-checked
                        input#flexCheckDefault.form-check-input(type='checkbox' value='')
                        label.form-check-label(for='flexCheckDefault')
                          | I agree to the policies
                      .col-12 
                        .form-check.form-switch
                          input#flexSwitchCheckDefault.form-check-input(type='checkbox' role='switch' required)
                          label.form-check-label(for='flexSwitchCheckDefault') Are you sure above information are true
                      .col-12
                        button.btn.btn-primary(type='submit') Submit
              .col-xl-6
                .card.height-equal
                  .card-header
                    h4 Validation form
                    p.f-m-light.mt-1
                      | Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.Background icons for 
                      code &lt;select&gt;
                      |s are only available with 
                      code .form-select
                      |  and not 
                      code .form-control.
                  .card-body
                    form.row.g-3.needs-validation.custom-input(novalidate='')
                      .col-12
                        label.form-label(for='validationCustom01') First name
                        input#validationCustom01.form-control(type='text' placeholder="Mark" required='')
                        .invalid-feedback
                          | Please enter your valid 
                        .valid-feedback 
                          | Looks's Good!
                      .col-12
                        label.col-sm-12.col-form-label(for='inputPassword1') Password
                        input#inputPassword1.form-control(type='password' required='')
                        .invalid-feedback
                          | Please enter your valid password            
                      .col-12
                        label.form-label(for='validationCustom04') State
                        select#validationCustom04.form-select(required='')
                          option(selected='' disabled='' value='') Choose...
                          option U.K 
                          option India 
                          option Thailand
                          option Newyork
                        .invalid-feedback
                          | Please select a valid state.
                        .valid-feedback 
                          | Looks's Good!   
                      .col-md-6
                        label.form-label(for='validationCustom03') City
                        input#validationCustom03.form-control(type='text' required='')
                        .invalid-feedback
                          | Please provide a valid city.
                        .valid-feedback 
                          | Looks's Good!
                      .col-md-6
                        label.form-label(for='validationCustom05') Zip
                        input#validationCustom05.form-control(type='text' required='')
                        .invalid-feedback
                          | Please provide a valid zip.
                        .valid-feedback 
                          | Looks's Good!
                      .col-12 
                        .card-wrapper.border.rounded-3.checkbox-checked
                          h6.sub-title Select your payment method
                          .radio-form
                            .form-check
                              input#validationFormCheck25.form-check-input(type='radio' name='radio-stacked' required='')
                              label.form-check-label(for='validationFormCheck25') MaterCard
                            .form-check
                              input#validationFormCheck23.form-check-input(type='radio' name='radio-stacked' required='')
                              label.form-check-label(for='validationFormCheck23') VISA
                      .col-12 
                        select.form-select(required='' aria-label='select example')
                          option(value='') Select Your Favorite Pixelstrap theme
                          option(value='1') Cuba
                          option(value='2') Tivo
                          option(value='3') Wingo
                        .invalid-feedback Invalid select feedback
                      .col-12 
                        label.form-label(for='formFile1') Choose File
                        input#formFile1.form-control(type='file' aria-label='file example' required='')
                        .invalid-feedback Invalid form file selected
                      .col-12 
                        label.form-label(for='validationTextarea') Description
                        textarea#validationTextarea.form-control(placeholder='Enter your comment' required='')
                        .invalid-feedback
                          | Please enter a message in the textarea.
                      .col-12
                        .form-check
                          input#invalidCheck.form-check-input(type='checkbox' value='' required='')
                          label.form-check-label(for='invalidCheck')
                            | Agree to terms and conditions
                          .invalid-feedback
                            | You must agree before submitting.
                      .col-12
                        button.btn.btn-primary(type='submit') Submit form
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files