- var page_Title = 'Form Validation';
- var form_validation       = true;
- var theme_customizer      = true;
- var form_validation_custom= true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var animated_form         = true;
- var animate               = true;
- var pwd_validation        = 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.validation-forms
          .container-fluid
            .page-title
              .grid.grid-cols-12
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Validation Forms
                div(class="col-span-6 sm:col-span-12")
                  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
            .grid.grid-cols-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header
                    h5 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 position: relative on it for tooltip positioning.
                  .card-body
                    form.grid.grid-cols-12.gap-3.needs-validation.custom-input(novalidate='')
                      div(class="col-span-4 md:col-span-12").position-relative
                        label.form-label(for='validationTooltip01') First Name
                        input#validationTooltip01.form-control(type='text' placeholder="Mark" required='')
                        .valid-tooltip
                          | Looks good!
                      div(class="col-span-4 md:col-span-12").position-relative
                        label.form-label(for='validationTooltip02') Last Name
                        input#validationTooltip02.form-control(type='text' placeholder="Otto" required='')
                        .valid-tooltip
                          | Looks good!
                      div(class="col-span-4 md:col-span-12").position-relative
                        label.form-label(for='validationTooltipUsername') Username
                        .input-group.has-validation.flex.flex-nowrap
                          span#validationTooltipUsernamePrepend.input-group-text @
                          input#validationTooltipUsername.form-control(type='text' aria-describedby='validationTooltipUsernamePrepend' required='')
                          .invalid-tooltip
                            | Please choose a unique and valid username.
                      div(class="col-span-6 md:col-span-12").position-relative
                        label.form-label(for='validationTooltip03') City
                        input#validationTooltip03.form-control(type='text' required='')
                        .invalid-tooltip
                          | Please provide a valid city.
                      div(class="col-span-3 md:col-span-12").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.
                      div(class="col-span-3 md:col-span-12").position-relative
                        label.form-label(for='validationTooltip05') Zip
                        input#validationTooltip05.form-control(type='text' required='')
                        .invalid-tooltip
                          | Please provide a valid zip.
                      div(class="col-span-12")
                        button.btn.btn-primary.text-white(type='submit') Submit form
              div(class="col-span-6 xl:col-span-12")
                .card.height-equal
                  .card-header
                    h5 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.grid.grid-cols-12.gap-3
                      div(class="col-span-12") 
                        label.form-label(for='first-name') First Name
                        input#first-name.form-control(type='text' placeholder='First name' aria-label='First name' required)
                      div(class="col-span-12")
                        label.form-label(for='exampleFormControlInput1') Email Address
                        input#exampleFormControlInput1.form-control(type='email' placeholder='pesamof475@saeoil.com' required)
                      div(class="col-span-12") 
                        label.col-sm-12.col-form-label(for='inputPassword2') Password
                        input#inputPassword2.form-control(type='password' required)
                      div(class="col-span-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
                      div(class="col-span-12") 
                        label.form-label(for='formFile') Choose File
                        input#formFile.form-control(type='file' required)
                      div(class="col-span-12") 
                        .card-wrapper.custom-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
                      div(class="col-span-12") 
                        label.form-label(for='exampleFormControlTextarea1') Description
                        textarea#exampleFormControlTextarea1.form-control(rows='3')
                      div(class="col-span-12").checkbox-checked.flex.gap-2
                        input#flexCheckDefault.form-check-input(type='checkbox' value='')
                        label.form-check-label(for='flexCheckDefault')
                          | I accept the policies.
                      div(class="col-span-12") 
                        .flex.gap-2
                          .form-check-size
                            .form-check.form-switch.form-check-inline
                              input.form-check-input.switch-danger.check-size(type='checkbox' role='switch')
                          label.form-check-label.mb-0(for='flexSwitchCheckDefault') Are you certain that the details above are accurate?
                      div(class="col-span-12")
                        button.btn.btn-primary.text-white(type='submit') Submit
              div(class="col-span-6 xl:col-span-12")
                .card.height-equal
                  .card-header
                    h5 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.grid.grid-cols-12.gap-3.needs-validation.custom-input(novalidate='')
                      div(class="col-span-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!
                      div(class="col-span-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            
                      div(class="col-span-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!   
                      div(class="col-span-6 md:col-span-12")
                        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!
                      div(class="col-span-6 md:col-span-12")
                        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!
                      div(class="col-span-12") 
                        .card-wrapper.custom-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
                      div(class="col-span-12") 
                        select.form-select(required='' aria-label='select example')
                          option(value='') Select Your Favorite Pixelstrap theme
                          option(value='1') Mofi
                          option(value='2') Tivo
                          option(value='3') Wingo
                        .invalid-feedback Invalid select feedback
                      div(class="col-span-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
                      div(class="col-span-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.
                      div(class="col-span-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.
                      div(class="col-span-12")
                        button.btn.btn-primary.text-white(type='submit') Submit form
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Form Validation with Effects
                    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}
                      | - classes to display validation in a styled effect.
                  .card-body.animated-form
                    form.grid.grid-cols-12.gap-3.needs-validation.custom-input(novalidate='')
                      div(class="col-span-12").position-relative
                        label.form-label(for='validationTooltipName') Full Name
                        input#validationTooltipName.form-control.required(type='text' placeholder="Enter your name" required='')
                      div(class="col-span-12").position-relative
                        label.form-label(for='validationTooltipGmail') Gmail
                        input#validationTooltipGmail.form-control.required.email(type='email' placeholder="pixelstrap@gmail.com" required='')
                      div(class="col-span-6 lg:col-span-12").position-relative
                        label.col-form-label(for='inputTooltipPassword') Password
                        input#inputTooltipPassword.form-control.required(type='password' placeholder="Enter your password" required='')
                      div(class="col-span-6 lg:col-span-12").position-relative
                        label.col-form-label(for='inputConfirmPassword') Confirm Password
                        input#inputConfirmPassword.form-control.required.confirmation(type='password' placeholder="Enter your confirm password" required='')
                      div(class="col-span-6")
                        button.btn.btn-primary.text-white(type='submit') Submit form                    
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Form with Password Strength Validation
                    p.f-m-light.mt-1 
                      | Use id 
                      code horizontal-login 
                      | to check password field strength.
                  //- .custom-input used as dark mode 
                  .card-body
                    .horizontal-login
                      form#horizontal-login.needs-validation.custom-input(novalidate='')
                        .mb-3
                          label.form-label(for='exampleInputEmail1') Email Address
                          input#exampleInputEmail1.form-control(type='email' autocomplete="off" placeholder="Enter your email" required)
                          .invalid-feedback
                            | Please provide a valid email.
                          .valid-feedback 
                            | Looks's Good!
                        .mb-3
                          label.form-label(for='validatepwd') Password
                          input#validatepwd.form-control(type='password' placeholder="Enter your password" required)
                          .invalid-feedback
                            | Please provide a valid password.
                          span.show-pass(onclick='toggle()')
                            i.fa-regular.fa-eye(onclick='myFunction(this)')
                          .progress
                            #password-strength.progress-bar(role='progressbar' aria-valuenow='40' aria-valuemin='0' aria-valuemax='100' style='width:0%')
                          ul.pwd-strength
                            li
                              span.low-upper-case
                                i.fas.fa-circle(aria-hidden='true')
                                | &nbsp;Lowercase &amp; Uppercase
                            li
                              span.one-number
                                i.fas.fa-circle(aria-hidden='true')
                                | &nbsp;Number (0-9)
                            li
                              span.one-special-char
                                i.fas.fa-circle(aria-hidden='true')
                                | &nbsp;Special Character (!@#$%^&amp;*)
                            li
                              span.eight-character
                                i.fas.fa-circle(aria-hidden='true')
                                | &nbsp;Atleast 8 Character
                        button.btn.btn-primary.d-block.ms-auto.text-white(type='submit') Submit
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files