FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Validating form generated by JotForm

JotForm is one of popular form builders. It provides a visual tool for dragging and dropping fields into form easily. We then can use the generated code in our site, and JotForm will give us the response from visitors via email automatically.

This example introduces steps to integrate FormValidation with form made by JotForm.

Downloading the files

Create a file named jotform.js with the following content:

(function($) {
    FormValidation.Framework.Jotform = function(element, options) {
        options = $.extend(true, {
            button: {
                selector: '[type="submit"]:not([formnovalidate])',
                // The class of disabled button
                disabled: 'fv-button-disabled'
            },
            err: {
                clazz: 'fv-help-block',
                parent: '^.*form-input-wide.*$'
            },
            // Skeleton doesn't support feedback icon
            icon: {
                valid: null,
                invalid: null,
                validating: null,
                feedback: 'fv-control-feedback'
            },
            row: {
                // By default, the field and its label are placed inside
                // a .form-line element
                selector: '.form-line',
                valid: 'fv-has-success',
                invalid: 'fv-has-error',
                feedback: 'fv-has-feedback'
            }
        }, options);

        FormValidation.Base.apply(this, [element, options]);
    };

    // The JotForm class need to extend from the FormValidation's Base one
    FormValidation.Framework.Jotform.prototype = $.extend({}, FormValidation.Base.prototype, {
    });
}(jQuery));

Create a file named jotform.css with the following content:

.fv-form-jotform .form-label-left {
    width: 200px !important;
}

.fv-form-jotform .fv-help-block {
    padding-top: 5px;
}

/* You can customize the color of success and error classes */
.fv-form-jotform .fv-has-error .form-label,
.fv-form-jotform .fv-has-error .fv-help-block,
.fv-form-jotform .fv-has-error .fv-control-feedback {
    color: red;
}

.fv-form-jotform .fv-has-success .form-label,
.fv-form-jotform .fv-has-success .fv-control-feedback {
    color: green;
}

/* Icon position */
.fv-form-jotform .fv-control-feedback {
    width: 25px;
    height: 25px;
    line-height: 25px;
    top: 12px;
}
.fv-form-jotform .form-sub-label-container .fv-control-feedback {
    top: 0;
}

You should place jotform.js and jotform.css in formvalidation/dist/js/framework and formvalidation/dist/css directories respectively.

Including the library

<!-- The default form styles provided by JotForm -->
<link rel="stylesheet" href="/vendor/jotform/css/form.css">

<!-- Optional: You can include additional theme of JotForm such as nova -->
<link rel="stylesheet" href="/vendor/jotform/css/nova.css">

<!-- Optional: Include the Font Awesome for using some icons -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />

<!-- FormValidation CSS file -->
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/formValidation.min.css">
<link rel="stylesheet" href="/vendor/formvalidation/dist/css/jotform.css">

<!-- jQuery v1.9.1 or higher -->
<script type="text/javascript" src="/vendor/jquery/jquery.min.js"></script>

<!-- FormValidation plugin and the class supports validating JotForm form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/jotform.js"></script>

Calling the plugin

When calling .formValidation(), you need to set the framework option:

$(form).formValidation({
    framework: 'jotform',
    ...
});

The following form is taken from the Time off request example provided by JotForm. The form markup is also cleaned up.

User need to provide a start date, end date, and a date to start working on. These dates also have to follow the conditions:

The end date must be later then the start one
The date to start working on must be later then the end one

Instead of using JotForm's date input which consists of three separated day, month, and year fields, we use a simple text input for filling a date. We can easily apply the date validator and use min option as a dynamic option:

$('#timeOffForm').formValidation({
    framework: 'jotform',
    fields: {
        startDate: {
            validators: {
                ...
                date: {
                    format: 'YYYY-MM-DD',
                    message: 'The start date must follow YYYY-MM-DD format'
                }
            }
        },
        endDate: {
            validators: {
                ...
                date: {
                    format: 'YYYY-MM-DD',
                    message: 'The end date must follow YYYY-MM-DD format and be later than the start date',
                    min: 'startDate'
                }
            }
        },
        startToWork: {
            validators: {
                ...
                date: {
                    format: 'YYYY-MM-DD',
                    message: 'The working date must follow YYYY-MM-DD format and be later than the end date',
                    min: 'endDate'
                }
            }
        }
    }
});

Some of fields use the row option to support multiple fields in the same row container

<form class="jotform-form" action="http://submit.jotform.me/submit.php" method="post" name="form_51937699295476" id="timeOffForm">
    <input type="hidden" name="formID" value="51937699295476"/>

    <div class="form-all">
        <ul class="form-section page-section">
            <li class="form-line jf-required" data-type="control_fullname">
                <label class="form-label form-label-left form-label-auto">
                    Employee Name <span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <span class="form-sub-label-container" style="vertical-align: top;">
                        <input class="form-textbox validate[required]" type="text" style="width: 200px;" name="employeeName[first]" />
                        <label class="form-sub-label">First Name</label>
                    </span>

                    <span class="form-sub-label-container" style="vertical-align: top">
                        <input class="form-textbox validate[required]" type="text" style="width: 200px;" name="employeeName[last]" />
                        <label class="form-sub-label">Last Name</label>
                    </span>
                </div>
            </li>

            <li class="form-line jf-required" data-type="control_email">
                <label class="form-label form-label-left form-label-auto">
                    E-mail <span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <input type="email" class="form-textbox validate[required, Email]" name="email" size="30" />
                </div>
            </li>

            <li class="form-line jf-required" data-type="control_phone">
                <label class="form-label form-label-left form-label-auto">
                    Contact Number <span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <span class="form-sub-label-container" style="vertical-align: top">
                        <input class="form-textbox validate[required]" type="tel" name="contactNumber[area]" style="width: 200px;" />
                        <label class="form-sub-label">Area Code</label>
                    </span>

                    <span class="form-sub-label-container" style="vertical-align: top">
                        <input class="form-textbox validate[required]" type="tel" name="contactNumber[phone]" style="width: 200px;" />
                        <label class="form-sub-label">Phone Number</label>
                    </span>
                </div>
            </li>

            <li class="form-line jf-required" data-type="control_textbox">
                <label class="form-label form-label-left form-label-auto">
                    Start Date<span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <input type="text" class="form-textbox validate[required]" data-type="input-textbox" name="startDate" size="20" value="" />
                </div>
            </li>

            <li class="form-line jf-required" data-type="control_textbox">
                <label class="form-label form-label-left form-label-auto">
                    End Date<span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <input type="text" class="form-textbox validate[required]" data-type="input-textbox" name="endDate" size="20" value="" />
                </div>
            </li>

            <li class="form-line jf-required" data-type="control_textbox">
                <label class="form-label form-label-left form-label-auto">
                    Start to work on<span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <input type="text" class="form-textbox validate[required]" data-type="input-textbox" name="startToWork" size="20" value="" />
                </div>
            </li>

            <li class="form-line jf-required" data-type="control_dropdown">
                <label class="form-label form-label-left form-label-auto">
                    Reason <span class="form-required">*</span>
                </label>

                <div class="form-input jf-required">
                    <select class="form-dropdown validate[required]" style="width: 200px" name="reason">
                        <option value=""></option>
                        <option value="Vacation">Vacation</option>
                        <option value="Personal Leave">Personal Leave</option>
                        <option value="Sick">Sick</option>
                        <option value="Others">Others</option>
                    </select>
                </div>
            </li>

            <li class="form-line" data-type="control_textarea">
                <label class="form-label form-label-left">Additional Comments</label>
                <div class="form-input jf-required">
                    <textarea class="form-textarea" name="additionalComments" cols="30" rows="7"></textarea>
                </div>
            </li>

            <li class="form-line" data-type="control_button">
                <div class="form-input-wide">
                    <div style="margin-left: 206px" class="form-buttons-wrapper">
                        <button type="submit" class="form-submit-button">Submit</button>
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <!-- Generated by JotForm -->
    <input type="hidden" id="simple_spc" name="simple_spc" value="51937699295476"/>
    <script type="text/javascript">
        document.getElementById("si" + "mple" + "_spc").value = "51937699295476-51937699295476";
    </script>
</form>

<script>
$(document).ready(function () {
    $('#timeOffForm').formValidation({
        framework: 'jotform',
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh',
            feedback: 'fv-control-feedback'
        },
        fields: {
            'employeeName[first]': {
                row: '.form-sub-label-container',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            'employeeName[last]': {
                row: '.form-sub-label-container',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The email address is not valid'
                    }
                }
            },
            'contactNumber[area]': {
                row: '.form-sub-label-container',
                validators: {
                    notEmpty: {
                        message: 'The area code is required'
                    },
                    digits: {
                        message: 'The area code can consist of number only'
                    }
                }
            },
            'contactNumber[phone]': {
                row: '.form-sub-label-container',
                validators: {
                    notEmpty: {
                        message: 'The phone number is required'
                    },
                    digits: {
                        message: 'The phone number can consist of number only'
                    }
                }
            },
            startDate: {
                validators: {
                    notEmpty: {
                        message: 'The start date is required'
                    },
                    date: {
                        format: 'YYYY-MM-DD',
                        message: 'The start date must follow YYYY-MM-DD format'
                    }
                }
            },
            endDate: {
                validators: {
                    notEmpty: {
                        message: 'The end date is required'
                    },
                    date: {
                        format: 'YYYY-MM-DD',
                        message: 'The end date must follow YYYY-MM-DD format and be later than the start date',
                        min: 'startDate'
                    }
                }
            },
            startToWork: {
                validators: {
                    notEmpty: {
                        message: 'The date to start working on is required'
                    },
                    date: {
                        format: 'YYYY-MM-DD',
                        message: 'The working date must follow YYYY-MM-DD format and be later than the end date',
                        min: 'endDate'
                    }
                }
            },
            reason: {
                validators: {
                    notEmpty: {
                        message: 'The reason is required'
                    }
                }
            }
        }
    });
});
</script>