---
title: Form Validation
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/formvalidation/formValidation.css">
  {{/content}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/forms/validation.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/formvalidation/formValidation.min.js"></script>
    <script src="{{global}}/vendor/formvalidation/framework/bootstrap4.min.js"></script>
  {{/content}}


  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/forms/validation.js"></script>
  {{/content}}

  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Form Validation</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item"><a href="javascript:void(0)">Forms</a></li>
          <li class="breadcrumb-item active">Validation</li>
        </ol>
        <div class="page-header-actions">
          <a class="btn btn-sm btn-primary btn-round" href="http://formvalidation.io" target="_blank">
        <i class="icon md-link" aria-hidden="true"></i>
        <span class="hidden-sm-down">Official Website</span>
      </a>
        </div>
      </div>

      <div class="page-content container-fluid">
        <!-- Panel Validation Styles -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Validation Styles</h3>
          </div>
          <div class="panel-body">
            <p>Bootstrap includes validation styles for invalid, and valid states
              on form controls. you can indicate invalid and valid form fields
              with <code>.is-invalid</code> and <code>.is-valid.</code> Note that
              .invalid-feedback is also supported with these classes.</p>

            <form class="row">
              <div class="col-lg-6 ">
                <div class="row">
                  <label class="col-lg-12 col-md-3 form-control-label">Input with Valid</label>
                  <div class="col-lg-12 col-md-9 form-group form-material">
                    <input type="text" class="form-control is-valid" id="inputValidation1" placeholder="Please ..."
                      value="Success" required>
                  </div>
                </div>
              </div>
              <div class="col-lg-6">
                <div class="row">
                  <label class="col-lg-12 col-md-3 form-control-label">Input with Invalid</label>
                  <div class="col-lg-12 col-md-9 form-group form-material">
                    <input type="text" class="form-control is-invalid" id="inputValidation2" placeholder="Please ..."
                      required>
                    <div class="invalid-feedback">
                      Please do something...
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
        <!-- End Panel Validation Styles -->

        <div class="row">
          <div class="col-lg-6">
            <!-- Panel Standard Mode -->
            <div class="panel">
              <div class="panel-heading">
                <h3 class="panel-title">Standard Mode</h3>
              </div>
              <div class="panel-body">
                <form class="form-horizontal" id="exampleStandardForm" autocomplete="off">
                  <div class="form-group row form-material">
                    <label class="col-md-3 form-control-label">Full name</label>
                    <div class="col-md-9">
                      <input type="text" class="form-control" name="standard_fullName" />
                    </div>
                  </div>
                  <div class="form-group row form-material">
                    <label class="col-md-3 form-control-label">Email</label>
                    <div class="col-md-9">
                      <input type="text" class="form-control" name="standard_email" />
                    </div>
                  </div>
                  <div class="form-group row form-material">
                    <label class="col-md-3 form-control-label">Content</label>
                    <div class="col-md-9">
                      <textarea class="form-control" name="standard_content" rows="5"></textarea>
                    </div>
                  </div>
                  <div class="text-right">
                    <button type="submit" class="btn btn-primary" id="validateButton2">Submit</button>
                  </div>
                </form>
              </div>
            </div>
            <!-- End Panel Standard Mode -->
          </div>

          <div class="col-lg-6">
            <!-- Panel Summary Mode -->
            <div class="panel">
              <div class="panel-heading">
                <h3 class="panel-title">Summary Mode</h3>
              </div>
              <div class="panel-body">
                <form class="form-horizontal" id="exampleSummaryForm" autocomplete="off">
                  <div class="summary-errors alert alert-danger alert-dismissible">
                    <button type="button" class="close" aria-label="Close" data-dismiss="alert">
                      <span aria-hidden="true">×</span>
                    </button>
                    <p>Errors list below: </p>
                    <ul></ul>
                  </div>
                  <div class="form-group row form-material">
                    <label class="col-md-3 form-control-label">Full name</label>
                    <div class="col-md-9">
                      <input type="text" class="form-control" name="summary_fullName" />
                    </div>
                  </div>
                  <div class="form-group row form-material">
                    <label class="col-md-3 form-control-label">Email</label>
                    <div class="col-md-9">
                      <input type="text" class="form-control" name="summary_email" />
                    </div>
                  </div>
                  <div class="form-group row form-material">
                    <label class="col-md-3 form-control-label">Content</label>
                    <div class="col-md-9">
                      <textarea class="form-control" name="summary_content" rows="5"></textarea>
                    </div>
                  </div>
                  <div class="text-right">
                    <button type="submit" class="btn btn-primary" id="validateButton3">Submit</button>
                  </div>
                </form>
              </div>
            </div>
            <!-- End Panel Summary Mode -->
          </div>
        </div>

        <!-- Panel Full Example -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Full Example
              <span class="panel-desc">Basic validation will display a label with the error after the form
                control. </span>
            </h3>
          </div>
          <div class="panel-body">

            <form id="exampleFullForm" autocomplete="off">
              <div class="row row-lg">
                <div class="col-xl-6 form-horizontal">
                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Username
                      <span class="required">*</span>
                    </label>
                    <div class=" col-xl-12 col-md-9">
                      <input type="text" class="form-control" name="username" placeholder="John Fish"
                        required="">
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Email
                      <span class="required">*</span>
                    </label>
                    <div class="col-xl-12 col-md-9">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="icon md-email" aria-hidden="true"></i>
                        </span>
                        <input type="email" class="form-control" name="email" placeholder="email@email.com"
                          required="">
                      </div>
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Password
                      <span class="required">*</span>
                    </label>
                    <div class="col-xl-12 col-md-9">
                      <div class="input-group">
                        <span class="input-group-addon">
                          <i class="icon md-lock" aria-hidden="true"></i>
                        </span>
                        <input type="password" class="form-control" name="password" placeholder="Min length 8"
                          required="">
                      </div>
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Birthday
                      <span class="required">*</span>
                    </label>
                    <div class="col-xl-12 col-md-9">
                      <input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD"
                        required="" />
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">GitHub</label>
                    <div class="col-xl-12 col-md-9">
                      <input type="url" class="form-control" name="github" placeholder="https://github.com/amazingSurge">
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Company</label>
                    <div class="col-xl-12 col-md-9">
                      <select class="form-control" id="company" name="company" required="">
                        <option value="">Choose a Company</option>
                        <option value="apple">Apple</option>
                        <option value="google">Google</option>
                        <option value="microsoft">Microsoft</option>
                        <option value="yahoo">Yahoo</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="col-xl-6 form-horizontal">
                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Remark Admin is
                      <span class="required">*</span>
                    </label>
                    <div class="col-xl-12 col-md-9">
                      <div class="d-flex flex-column">
                        <div class="radio-custom radio-primary">
                          <input type="radio" id="inputAwesome" name="porto_is" value="awesome" required="">
                          <label for="inputAwesome">Awesome</label>
                        </div>

                        <div class="radio-custom radio-primary">
                          <input type="radio" id="inputVeryAwesome" name="porto_is" value="very-awesome">
                          <label for="inputVeryAwesome">Very Awesome</label>
                        </div>

                        <div class="radio-custom radio-primary">
                          <input type="radio" id="inputUltraAwesome" name="porto_is" value="ultra-awesome">
                          <label for="inputUltraAwesome">Ultra Awesome</label>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">I will use it for
                      <span class="required">*</span>
                    </label>
                    <div class="col-xl-12 col-md-9">
                      <div class="d-flex flex-column">
                        <div class="checkbox-custom checkbox-primary">
                          <input type="checkbox" id="inputForProject" name="for[]" value="project" required="">
                          <label for="inputForProject">My Project</label>
                        </div>

                        <div class="checkbox-custom checkbox-primary">
                          <input type="checkbox" id="inputForWebsite" name="for[]" value="website">
                          <label for="inputForWebsite">My Website</label>
                        </div>

                        <div class="checkbox-custom checkbox-primary">
                          <input type="checkbox" id="inputForAll" name="for[]" value="all">
                          <label for="inputForAll">All things I do</label>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Skills
                      <span class="required">*</span>
                    </label>
                    <div class="col-xl-12 col-md-9">
                      <textarea class="form-control" name="skills" rows="3" placeholder="Describe your skills"
                        required=""></textarea>
                    </div>
                  </div>
                  <div class="form-group row form-material">
                    <label class="col-xl-12 col-md-3 form-control-label">Browsers</label>
                    <div class="col-xl-12 col-md-9">
                      <select class="form-control" id="browsers" name="browsers" title="Please select at least one browser"
                        size="5" multiple="multiple" required="">
                        <option value="chrome">Chrome / Safari</option>
                        <option value="ff">Firefox</option>
                        <option value="ie">Internet Explorer</option>
                        <option value="opera">Opera</option>
                      </select>
                    </div>
                  </div>
                </div>

                <div class="form-group form-material col-xl-12 text-right padding-top-m">
                  <button type="submit" class="btn btn-primary" id="validateButton1">Submit</button>
                </div>
              </div>
            </form>
          </div>
        </div>
        <!-- End Panel Full Example -->

        <!-- Panel Constraints -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Constraints</h3>
          </div>
          <div class="panel-body">
            <div class="row row-lg">
              <div class="col-lg-6">
                <!-- Example Basic Constraints -->
                <div class="example-wrap m-md-0">
                  <h4 class="example-title">Basic Constraints</h4>
                  <div class="example">
                    <form class="form-horizontal" id="exampleConstraintsForm" autocomplete="off">
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Required</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="requiredInput" data-fv-notempty="true"
                            data-fv-notempty-message="This is required">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <div class="offset-md-3 col-md-9">
                          <select class="form-control" name="requiredSelect" data-fv-notempty="true">
                            <option value="">Please choose</option>
                            <option value="foo">Foo</option>
                            <option value="bar">Bar</option>
                          </select>
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <div class="offset-md-3 col-md-9">
                          <div class="input-group">
                            <div class="checkbox-custom checkbox-primary">
                              <input type="checkbox" id="requiredCheckbox" name="requiredCheckbox" data-fv-notempty="true"
                                data-fv-notempty-message="This is required">
                              <label for="requiredCheckbox">Agree to the policy</label>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Min Length</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vMinLength" data-fv-stringlength="true"
                            data-fv-stringlength-min="8" data-fv-notempty-message="This is required"
                            data-fv-stringlength-message="please enter more than 8 length"
                            placeholder="minlength = 8" />
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Max Length</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vMaxLength" data-fv-stringlength="true"
                            data-fv-stringlength-max="3" data-fv-stringlength-message="please enter less than 3 length"
                            placeholder="maxlength = 3" />
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Range Length</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vBetweenLength" data-fv-stringlength="true"
                            data-fv-stringlength-max="10" data-fv-stringlength-min="5"
                            data-fv-stringlength-message="please enter between 5 to 10 length"
                            placeholder="data-rangelength = [5,10]">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Min</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vMin" data-fv-greaterthan="true"
                            data-fv-greaterthan-value="6" data-fv-greaterthan-message="please enter more than 6"
                            placeholder="min = 6">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Max</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vMax" data-fv-lessthan="true" data-fv-lessthan-value="50"
                            data-fv-greaterthan-message="please enter less than 50"
                            placeholder="max = 50">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Range</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vRange" data-fv-between="true" data-fv-between-min="6"
                            data-fv-between-max="50" data-fv-between-message="please enter between[6,50]"
                            placeholder="range = [6, 50]">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">RegExp</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="vRegExp" data-fv-regexp="true" data-fv-regexp-regexp="#[A-Fa-f0-9]{6}"
                            data-fv-regexp-message="please enter hexa color code"
                            placeholder="hexa color code">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Equal To (confirm)</label>
                        <div class="col-md-9">
                          <div class="row">
                            <div class="col-md-6">
                              <input type="text" class="form-control" name="foo_one" data-fv-notempty="true"
                                data-fv-notempty-message="The content is required and cannot be empty"
                                data-fv-identical="true" data-fv-identical-field="foo_two"
                                data-fv-identical-message="The content and its confirm are not the same"
                              />
                            </div>
                            <div class="col-md-6">
                              <input type="text" class="form-control" name="foo_two" data-fv-notempty="true"
                                data-fv-notempty-message="The confirm content is required and cannot be empty"
                                data-fv-identical="true" data-fv-identical-field="foo_one"
                                data-fv-identical-message="The content and its confirm are not the same"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <!-- End Example Basic Constraints -->
              </div>

              <div class="col-lg-6">
                <!-- Example Type -->
                <div class="example-wrap">
                  <h4 class="example-title">Type</h4>
                  <div class="example">
                    <form class="form-horizontal" id="exampleConstraintsFormTypes" autocomplete="off">
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Email</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_email" placeholder="email">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Url</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_url" placeholder="url">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Digits</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_digits" placeholder="digits">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Number</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_numberic" placeholder="number">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Color</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_color" placeholder="color">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Date</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_date" placeholder="YYYY-MM-DD">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Phone</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_phone" placeholder="(XXX) XXXX XXX">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">Credit Card</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_credit_card" placeholder="creditCard">
                        </div>
                      </div>
                      <div class="form-group row form-material">
                        <label class="col-md-3 form-control-label">IP</label>
                        <div class="col-md-9">
                          <input type="text" class="form-control" name="type_ip" placeholder="ip">
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                <!-- End Example Type -->
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Constraints -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}