Validation

Provide valuable, actionable feedback to your users with HTML5 form validation.

How it works

Here's how form validation works with Space:

Space uses third-party jQuery validation plugin.
HTML form validation is applied via .u-has-success and .u-has-error classes. It applies to <input>, <select>, and <textarea> elements.
Space scopes the .u-has-success and .u-has-error styles to parent element, applied next to the <js-form-message>..
All modern browsers support the constraint validation API, a series of JavaScript methods for validating form controls.

With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults.

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS init function of the hs.validation.js plugin.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

            
              <script src="assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Space to enable it.

            
              <script src="assets/js/components/hs.validation.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of form validation
                  $.HSCore.components.HSValidation.init('.js-validate');
                });
              </script>

Example

Your name *

Your email address *

Subject *

Your Phone Number *

How can we help you? *

              
                <form class="js-validate">
                  <div class="row">
                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="h6 small d-block text-uppercase">
                          Your name
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state input-group form">
                          <input class="form-control form__input" type="text" name="name" required
                                 placeholder="Jack Wayley"
                                 aria-label="Jack Wayley"
                                 data-msg="Please enter your name."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="h6 small d-block text-uppercase">
                          Your email address
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state input-group form">
                          <input class="form-control form__input" type="email" name="email" required
                                 placeholder="jackwayley@gmail.com"
                                 aria-label="jackwayley@gmail.com"
                                 data-msg="Please enter a valid email address."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>

                    <div class="w-100"></div>

                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="h6 small d-block text-uppercase">
                          Subject
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state input-group form">
                          <input class="form-control form__input" type="text" name="subject" required
                                 placeholder="Web design"
                                 aria-label="Web design"
                                 data-msg="Please enter a subject."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>

                    <div class="col-sm-6 mb-6">
                      <div class="js-form-message">
                        <label class="h6 small d-block text-uppercase">
                          Your Phone Number
                          <span class="text-danger">*</span>
                        </label>

                        <div class="js-focus-state input-group form">
                          <input class="form-control form__input" type="number" name="phone" required
                                 placeholder="1-800-643-4500"
                                 aria-label="1-800-643-4500"
                                 data-msg="Please enter a valid phone number."
                                 data-error-class="u-has-error"
                                 data-success-class="u-has-success">
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="js-form-message mb-5">
                    <label class="h6 small d-block text-uppercase">
                      How can we help you?
                      <span class="text-danger">*</span>
                    </label>

                    <div class="js-focus-state input-group form">
                      <textarea class="form-control form__input" rows="4" name="text" required
                                placeholder="Hi there, I would like to ..."
                                aria-label="Hi there, I would like to ..."
                                data-msg="Please enter a reason."
                                data-error-class="u-has-error"
                                data-success-class="u-has-success"></textarea>
                    </div>
                  </div>

                  <div class="text-center">
                    <button type="submit" class="btn btn-primary btn-wide mb-4">Submit</button>
                  </div>
                </form>

Attributes

            
              data-rule-required="true" - boolean
              data-rule-email="true" - boolean
              data-rule-minlength="2" - integer
              data-rule-maxlength="10" - integer
              data-rule-equalto="#ID" - string
              data-msg="Some Text!" - string
              data-msg-email="Some Text!" - string
              data-msg-minlength="Some Text!" - string
              data-msg-maxlength="Some Text!" - string
              data-msg-equalto="Some Text!" - string
              data-msg-classes=".class-name .class-name-2" - string
              data-error-class=".class-name" - string
              data-success-class=".class-name" - string

Callbacks

            
              errorPlacement: function () {} - function
              highlight: function () {} - function
              unhighlight: function () {} - function

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-rule-required="".

Attribute	Description
`data-rule-required`	Determines whether this field is required to fill-up.
`data-rule-email`	If `data-rule-email=""` is set to `true`, this field will work as `type="email"`
`data-rule-minlength`	Defines the minimum number of characters for a given field. If the entered characters are less, then the plugin will return an error.
`data-rule-maxlength`	Defines the maximum number of characters for a given field. If there are more typed characters, the plugin will return an error.
`data-rule-equalto`	Defines the field with which the current field should have the same value.
`data-msg`	The text of the message when the error is returned.
`data-msg-email`	The message text is returned if the entered data does not correspond to the possible correct email address.
`data-msg-minlength`	The message text is returned if the characters in the field are less than specified in the `data-rule-minlength`
`data-msg-maxlength`	The message text is returned if the characters in the field are more than specified in the `data-rule-maxlength`
`data-msg-equalto`	The message text is returned if the entered data does not match the data entered in the field whose ID is specified in the value.
`data-msg-classes`	Defines the classes that will be added to the error element.
`data-error-class`	Defines the classes that will be added to the container in which this field is located, when an error is returned.
`data-success-class`	Defines the classes that will be added to the container in which this field is located, if it is correctly filled.
`errorPlacement: function () {}`	This function executes the code inside the function body, every time the error of filling the ALL form is returned.
`highlight: function () {}`	This function executes the code inside the function body, after the form validation, every time the error of filling a SPECIFIC field is returned.
`unhighlight: function () {}`	This function executes the code, inside the body of the function, after the form validation, each time when it receives data in the SPECIFIC field corresponding to the rules of this field.