Validation

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

How it works

Here's how form validation works with Nova:

  • Nova uses third-party jQuery validation plugin.
  • HTML form validation is applied via .has-success and .has-error or .u-has-success and .u-has-error classes. It applies to <input>, <select>, and <textarea> elements.
  • Nova scopes the .has-success and .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.jquery-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 Nova to enable it.

            
              <script src="../../assets/js/components/hs.jquery-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>
            
          

Basic example

                  
                    <!-- Contacts Form -->
                    <form class="js-validate">
                      <div class="row">
                        <!-- Input -->
                        <div class="col-sm-6 mb-6">
                          <div class="js-form-message js-focus-state">
                            <label class="form-label">
                              Your name
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="name" placeholder="Jack Wayley" aria-label="Jack Wayley" required
                                   data-msg="Please enter your name."
                                   data-error-class="has-error"
                                   data-success-class="has-success">
                          </div>
                        </div>
                        <!-- End Input -->

                        <!-- Input -->
                        <div class="col-sm-6 mb-6">
                          <div class="js-form-message js-focus-state">
                            <label class="form-label">
                              Your email address
                              <span class="text-danger">*</span>
                            </label>

                            <input type="email" class="form-control" name="email" placeholder="jackwayley@gmail.com" aria-label="jackwayley@gmail.com" required
                                   data-msg="Please enter a valid email address."
                                   data-error-class="has-error"
                                   data-success-class="has-success">
                          </div>
                        </div>
                        <!-- End Input -->

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

                        <!-- Input -->
                        <div class="col-sm-6 mb-6">
                          <div class="js-form-message js-focus-state">
                            <label class="form-label">
                              Subject
                              <span class="text-danger">*</span>
                            </label>

                            <input type="text" class="form-control" name="subject" placeholder="Web design" aria-label="Web design" required
                                   data-msg="Please enter a subject."
                                   data-error-class="has-error"
                                   data-success-class="has-success">
                          </div>
                        </div>
                        <!-- End Input -->

                        <!-- Input -->
                        <div class="col-sm-6 mb-6">
                          <div class="js-form-message js-focus-state">
                            <label class="form-label">
                              Your Phone Number
                              <span class="text-danger">*</span>
                            </label>

                            <input type="number" class="form-control" name="phone" placeholder="1-800-643-4500" aria-label="1-800-643-4500" required
                                   data-msg="Please enter a valid phone number."
                                   data-error-class="has-error"
                                   data-success-class="has-success">
                          </div>
                        </div>
                        <!-- End Input -->
                      </div>

                      <!-- Input -->
                      <div class="js-form-message js-focus-state mb-6">
                        <label class="form-label">
                          How can we help you?
                          <span class="text-danger">*</span>
                        </label>

                        <div class="input-group">
                          <textarea class="form-control" rows="4" name="text" placeholder="Hi there, I would like to ..." aria-label="Hi there, I would like to ..." required
                                    data-msg="Please enter a reason."
                                    data-error-class="has-error"
                                    data-success-class="has-success"></textarea>
                        </div>
                      </div>
                      <!-- End Input -->
                    </form>
                    <!-- End Contacts Form -->
                  
                

Validation state icons

                        
                          <form class="js-validate">
                            <!-- Input -->
                            <div class="js-form-message js-focus-state form-group mb-3 mb-md-3">
                              <label for="inputName2">
                                Your Name
                                <span class="text-danger">*</span>
                              </label>
                              <input type="text" required placeholder="John Doe" class="form-control" name="inputName2"
                                     id="inputName2"
                                     data-msg="Please enter your name."
                                     data-error-class="u-has-error validate-icon"
                                     data-success-class="u-has-success validate-icon">
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="js-form-message js-focus-state form-group">
                              <label for="inputEmail2">
                                Email Address
                                <span class="text-danger">*</span>
                              </label>
                              <input type="email" required placeholder="johnDoe@gmail.com" class="form-control" name="inputEmail2"
                                     id="inputEmail2"
                                     data-msg="Please enter your email address."
                                     data-error-class="u-has-error validate-icon"
                                     data-success-class="u-has-success validate-icon">
                            </div>
                            <!-- End Input -->

                            <!-- Select -->
                            <div class="js-form-message js-focus-state form-group">
                              <label>
                                Country
                                <span class="text-danger">*</span>
                              </label>

                              <div class="input-group">
                                <select class="form-control custom-select text-muted" required data-msg="Please select country."
                                        data-error-class="u-has-error validate-icon"
                                        data-success-class="u-has-success validate-icon">
                                  <option value="">Select country</option>
                                  <option value="AF">Afghanistan</option>
                                  <option value="AX">Åland Islands</option>
                                  <option value="AL">Albania</option>
                                  <option value="DZ">Algeria</option>
                                </select>
                              </div>
                            </div>
                            <!-- End Select -->

                            <!-- Textarea -->
                            <div class="js-form-message js-focus-state form-group">
                              <label>
                                How can we help you?
                                <span class="text-danger">*</span>
                              </label>
                              <textarea required class="form-control" name="describe2" id="describe2"
                                        placeholder="Hi there, I would like to ..."
                                        data-error-class="u-has-error validate-icon"
                                        data-success-class="u-has-success validate-icon"></textarea>
                            </div>
                            <!-- End Textarea -->

                            <!-- Button Submit -->
                            <div class="form-group">
                              <button class="btn btn-primary" type="submit">Submit</button>
                            </div>
                            <!-- End Button Submit -->
                          </form>
                        
                      

Validation types

Select minimum 2 options.
Select maximum 2 options.
                        
                          <form class="js-validate">
                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Required</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="text" class="form-control" name="form-control-1" placeholder="Placeholder" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Min length</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="text" class="form-control" name="form-control-2" placeholder="Min 4 chars" minlength="4" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Max length</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="text" class="form-control" name="form-control-3" placeholder="Max 10 chars" maxlength="10" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Range length</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="text" class="form-control" name="form-control-4" placeholder="Text between 4 - 10 chars" minlength="4" maxlength="10" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Min Value</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="number" class="form-control" name="form-control-5" placeholder="Min 10 value" min="10" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Max Value</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="number" class="form-control" name="form-control-6" placeholder="Max 100 value" max="100" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Range Value</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="number" class="form-control" name="form-control-7" placeholder="Value between 10 - 100" min="10" max="100" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Equal to</label>
                              <div class="col-md-3 mb-3 mb-md-0 js-form-message js-focus-state">
                                <input type="password" id="password" class="form-control" name="form-control-8" placeholder="Password" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                              <div class="col-md-3 js-form-message js-focus-state">
                                <input type="password" class="form-control" name="form-control-9" placeholder="Repeat password" required data-rule-equalTo="#password" data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Checkboxes -->
                            <div class="row mb-3">
                              <label class="col-md-3 text-md-right">Min check</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <div class="d-flex">
                                  <div class="custom-control custom-checkbox form-check form-check-inline">
                                    <input type="checkbox" id="form-control-10" class="custom-control-input" name="minCheckboxes[]" minlength="2" required>
                                    <label class="custom-control-label" for="form-control-10">Option 1</label>
                                  </div>
  
                                  <div class="custom-control custom-checkbox form-check form-check-inline">
                                    <input type="checkbox" id="form-control-11" class="custom-control-input" name="minCheckboxes[]">
                                    <label class="custom-control-label" for="form-control-11">Option 2</label>
                                  </div>
  
                                  <div class="custom-control custom-checkbox form-check form-check-inline">
                                    <input type="checkbox" id="form-control-12" class="custom-control-input" name="minCheckboxes[]">
                                    <label class="custom-control-label" for="form-control-12">Option 3</label>
                                  </div>
                                </div>
                                <small class="form-text text-muted">Select minimum 2 options.</small>
                              </div>
                            </div>
                            <!-- End Checkboxes -->
                          
                            <!-- Checkboxes -->
                            <div class="row mb-3">
                              <label class="col-md-3  text-md-right">Max check</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <div class="d-flex">
                                  <div class="custom-control custom-checkbox form-check-inline">
                                    <input type="checkbox" id="form-control-13" class="custom-control-input" name="maxCheckboxes[]" maxlength="2" required>
                                    <label class="custom-control-label" for="form-control-13">Option 1</label>
                                  </div>
  
                                  <div class="custom-control custom-checkbox form-check-inline">
                                    <input type="checkbox" id="form-control-14" class="custom-control-input" name="maxCheckboxes[]">
                                    <label class="custom-control-label" for="form-control-14">Option 2</label>
                                  </div>
  
                                  <div class="custom-control custom-checkbox form-check-inline">
                                    <input type="checkbox" id="form-control-15" class="custom-control-input" name="maxCheckboxes[]">
                                    <label class="custom-control-label" for="form-control-15">Option 3</label>
                                  </div>
                                </div>
                                <small class="form-text text-muted">Select maximum 2 options.</small>
                              </div>
                            </div>
                            <!-- End Checkboxes -->

                            <!-- Switch -->
                            <div class="row mb-3">
                              <label class="col-md-3 text-md-right">Switch</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <div class="custom-control custom-switch">
                                  <input type="checkbox" class="custom-control-input" id="customSwitch" name="customSwitch" required
                                         data-error-class="u-has-error"
                                         data-success-class="u-has-success">
                                  <label class="custom-control-label" for="customSwitch">Enable mode</label>
                                </div>
                              </div>
                            </div>
                            <!-- End Switch -->
                          
                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">E-Mail address</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="email" class="form-control" name="form-control-16" placeholder="Email address" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">URL</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="url" class="form-control" name="form-control-17" placeholder="http://htmlstream.com" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Input -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Digits</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <input type="text" class="form-control" name="form-control-18" placeholder="Digits" required data-rule-digits="true" data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Input -->

                            <!-- Textarea -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Textarea</label>
                              <div class="col-md-6 js-form-message js-focus-state">
                                <textarea class="form-control" name="form-control-21" required data-error-class="u-has-error" data-success-class="u-has-success"></textarea>
                              </div>
                            </div>
                            <!-- End Textarea -->

                            <!-- Button Submit -->
                            <div class="row mb-3">
                              <div class="col-md-6 offset-md-3">
                                <button type="submit" class="btn btn-primary">Submit</button>
                              </div>
                            </div>
                            <!-- End Button Submit -->
                          </form>
                        
                      

Validation Advanced Types

                          
                            <!-- Custom Select -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Custom select</label>
                              <div class="col-md-6 js-form-message">
                                <select class="js-custom-select" name="form-control-19" required style="width: 100%;" data-is-hide-search="true" data-placeholder="Select member"  data-error-class="u-has-error" data-success-class="u-has-success">
                                  <option></option>
                                  <option value="1">Bruce Maynard</option>
                                  <option value="2">Hollis Clark</option>
                                  <option value="3">Lester Howard</option>
                                  <option value="4">George Marino</option>
                                  <option value="5">Tyler Johnson</option>
                                  <option value="6">Jennifer Craig</option>
                                  <option value="7">Martha Barnwell</option>
                                  <option value="8">Florencia Todd</option>
                                  <option value="9">Henry Sloan</option>
                                  <option value="10">Abigail Watson</option>
                                </select>
                              </div>
                            </div>
                            <!-- End Custom Select -->

                            <!-- Datepicker -->
                            <div class="row mb-3">
                              <label class="col-md-3 col-form-label text-md-right">Datepicker</label>
                              <div class="col-md-6 js-form-message">
                                <input type="text" class="js-datepicker form-control" name="form-control-20" placeholder="Select dates" required data-error-class="u-has-error" data-success-class="u-has-success">
                              </div>
                            </div>
                            <!-- End Datepicker -->
                          
                        

JavaScript behavior

Callbacks

            
              errorPlacement: function () {} - function
              highlight: function () {} - function
              unhighlight: function () {} - function
            
          
                    
                      $(document).on('ready', function () {
                        // Jquery validation rule for checkboxed with min value
                        jQuery.validator.addMethod('min2selected',function(value, element) {
                        console.log($(element))
                        return $('.minCheckboxes').filter(':checked').length >= 2;
                        }, 'You must check at least 2 box.');

                        // Jquery validation rule for checkboxed with max value
                        jQuery.validator.addMethod('max2selected',function(value, element) {
                        return $('.maxCheckboxes').filter(':checked').length <= 2;
                        }, 'You must select no more than 2 checkbox.');

                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate', {
                          rules: {
                          "minCheckboxes[]": {
                            required: true,
                            min2selected: true
                          },
                          "maxCheckboxes[]": {
                            required: true,
                            max2selected: true
                          }
                        }
                        });
                      });
                    
                  

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.