Form Validation: Magic JavaScript

Usage

Add data-mjf="form_required" name="FORM_NAME" id="FORM_NAME" to your <form> tag.
Add data-mjf="field_required" id="FIELD_ID" to your field tags.
Add <script type="text/javascript">$m.wand.form_required = true;</script> inside your <body> tag.
Optional:
- Add <span class="field_error_msg_off" id="FIELD_ID_required_msg"><br>This field is required</span> under your form field. This message will then toggle on and off as needed.
- Add data-mjf_err_parent="PARENT_ID" to your form field to highlight a particular HTML element on error. Otherwise the field's parent node will be highlighted. Note the differences below.

Example

* Text Field 1
This field is required

* Text Field 2
This field is required

* Text Field 3

Text Field 4

* Select Single At least one option must be selected
This field is required

* Select Multiple
At least one option must be selected

* Radio Buttons Option 1
Option 2
Option 3
Option 4
At least one radio button must be selected

* Checkboxes Option 1
Option 2
Option 3
At least one check box must be selected

* Radio Button Option 1

* Checkbox Option 1

Notes

For validation to work on <select>, include something like <option value="">Please choose...</option> as the first option.
disabled and readonly fields are not validated.