Quick Jump ↵
Add data-mjf="form_required" name="FORM_NAME" id="FORM_NAME" to your <form> tag.
data-mjf="form_required" name="FORM_NAME" id="FORM_NAME"
<form>
Add data-mjf="field_required" id="FIELD_ID" to your field tags.
data-mjf="field_required" id="FIELD_ID"
Add <script type="text/javascript">$m.wand.form_required = true;</script> inside your <body> tag.
<script type="text/javascript">$m.wand.form_required = true;</script>
<body>
* Text Field 1 This field is required
* Text Field 2 This field is required
* Text Field 3
Text Field 4
* Select Single Please choose... Option 1 Option 2 Option 3 At least one option must be selected This field is required
* Select Multiple Option 1 Option 2 Option 3 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
Add <span class="field_error_msg_off" id="FIELD_ID_required_msg"><br>This field is required</span> under your form field if you'd like a message toggled on and off as necessary.
<span class="field_error_msg_off" id="FIELD_ID_required_msg"><br>This field is required</span>
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. This explains the visual differences above.
data-mjf_err_parent="PARENT_ID"
For validation to work on <select>, include something like <option value="">Please choose...</option> as the first option.
<select>
<option value="">Please choose...</option>
Fields that are disabled and/or readonly are not validated.
disabled
readonly
« Back to the main documentation
Form Validation: Magic JavaScript