Home → GENERAL → Components → Default form and form validation

5.1. Default form and form validation

1. What does this do?
   1. Under normal circumstances, this form will simply go to the destination page, via AJAX, and then load the response into that same <div>
   2. In order to take advantage of validation, but not utilize the "load response back into div" part, simply add the form attribute method="POST", this will tell the form that it should be submitted normally, i.e., not via AJAX

                    i.      e.g., <form action="path/to/submit/page" method="POST">

1. Using the Form
   1. First, ensure that the form in question is wrapped in a <div> with a class of ajax_form. The function will only affect forms wrapped within this <div>
   2. The function can be called by running bind_default_form()
      
      
2. Validating the form
   1. The function that is responsible for validation is default_validation()
   2. Any field that is mandatory should have a class of js-required – this is applied to the <input>
   3. <input type="text"> that have js-required will only be validated in one dimension, i.e., whether or not the field is blank. If the field is blank, the user is alerted and the form submission is cancelled.
   4. If validation is required in more than one dimension, validating an email address for example, we have special classes that can be used. The values of these fields will be tested again a Regular Expression and will return an error if they failed the test.

                     i.      js-email

                    ii.      js-phone

1. To validate <input type="radio"> just make sure that at least one of the radios from the group – i.e., that have the same name – have the class js-required
2. To validate <input type="checkbox"> all the associated checkboxes must be wrapped in a <div> with a class of js-checkbox and js-required.
3. In order to pass a custom validation, on the <form> in question, add the following:

                     i.      <input type="hidden" name="form_validation" value="{{name_of_function_to_be_called}}">

                    ii.      This function can itself contain a call to default_validation()[1], so there is no need to reinvent the wheel when customizing a validation

1. Alerting the user[2]
   1. If the form has been found to be invalid, two things will happen:

                     i.      The first error – aka the first invalid field – will be "focused"

                    ii.      An alert with a given message will be displayed

Downloads

• doc
  Form Validation.docx
• pdf
  Form Validation.pdf