Create And Handle HTML Forms With jQuery Reform.js Plugin
File Size: | 87.5 KB |
---|---|
Views Total: | 1543 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
The Reform.js jQuery plugin provides an easy way to create and handle forms with a modern approach in mind.
Features custom styles, AJAX form submit, form validation and more.
How to use it:
1. Create the form fields using the following CSS classes:
<!-- Normal Input --> <input type="text" name="name"> <input type="submit" value="Submit"> <!-- Grouped Checkboxes --> <form> <div class="rf-group rf-group-single"> <label class="rf-checkbox rf-req"> <input type="checkbox" value="sample-1" name="checkbox"> <p>Sample 1</p> </label> <label class="rf-checkbox rf-req"> <input type="checkbox" value="sample-2" name="checkbox"> <p>Sample 2</p> </label> <label class="rf-checkbox rf-req"> <input type="checkbox" value="sample-3" name="checkbox"> <p>Sample 3</p> </label> </div> <input type="submit" value="Submit"> </form> <!-- Select Box --> <form> <label class="rf-select"> <p>Sample</p> <select placeholder="Please select ..." name="select"> <option value="option-1">Option 1</optionv> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> </select> </label> <input type="submit" value="Submit"> </form> <!-- Form Validation --> <form> <label> <p>Normal</p> <input type="text" name="name"> </label> <label class="rf-req"> <p>Required*</p> <input type="text" name="required"> </label> <label class="rf-req rf-val"> <p>E-Mail*</p> <input type="email" name="email"> </label> <label class="rf-req rf-val"> <p>Website*</p> <input type="url" name="ulr"> </label> <label class="rf-req rf-val" rf-val="phone"> <p>Phone*</p> <input type="text" name="phone"> </label> <input type="submit" value="Submit"> </form>
2. Include jQuery library and the jQuery Reform.js script at the bottom of the page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="/dist/reform.js"></script>
3. Attach the Reform.js to your HTML forms.
var reform = $('form').reform();
4. The example CSS to beautify the form controls.
label+label, button { margin-top: 1em } label, button { display: block; width: 400px } button { border: 0; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 10px; line-height: 24px; border-radius: 3px; background: white; border: 1px solid #ccc; border: none; color: white; font-weight: 500; background: black; text-transform: uppercase } label { position: relative } label p { padding-bottom: .5em } label input, label textarea, label select { border: 0; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 10px; line-height: 24px; border-radius: 3px; background: white; border: 1px solid #ccc } label input:focus, label textarea:focus, label select:focus { outline: none; padding: 4px 9px; border: 2px solid black } label.rf-select::after { width: 10px; right: 12px; content: ''; height: 10px; bottom: 14px; display: block; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-right: 4px solid black; border-bottom: 4px solid black } label.rf-error p { color: #ff5252 } label.rf-error input { padding: 4px 9px; border: 2px solid #ff5252 } label.rf-error .rf-error-info { right: 7px; bottom: 5px; font-size: 12px; padding: 5px 0 0; position: absolute } label.rf-checkbox input { display: none } label.rf-checkbox p { cursor: pointer; margin-left: 35px; position: relative } label.rf-checkbox p::before { display: block; content: ''; width: 24px; height: 24px; position: absolute; background: #ccc; border-radius: 5px; left: -35px; top: -3px } label.rf-checkbox p::after { top: -8px; opacity: 0; left: -26px; width: 10px; content: ''; height: 20px; display: block; position: absolute; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-right: 4px solid black; border-bottom: 4px solid black } label.rf-checkbox input:checked+p::after { opacity: 1 } label.rf-checkbox.rf-error p::before { background: #ff5252 }
5. All default options to handle the HTML forms.
var reform = $('form').reform({ // jQuery AJAX options ajax: {}, // where to send the form data url: null, // or 'json' convert: 'serialize', // enable/disable debug mode debugMode: false, // or 'de' lang: 'en', // localization strings localization: { en: { errorMinLength: 'Please enter at lease 2 characters.', errorValidationUrl: 'Web url not valid.', errorValidationEmail: 'Email address not valid.', errorValidationPhone: 'Phone number not valid.' }, de: { errorMinLength: 'Bitte geben Sie mindestens 2 Zeichen an.', errorValidationUrl: 'Web-URL nicht gültig.', errorValidationEmail: 'E-Mail Adresse nicht gültig.', errorValidationPhone: 'Telefonnummer nicht gültig.' } }, // for ajax type: 'post', // validation options validation: { minLength: 2, displayRequireErrorInfo: false, displayValidationErrorInfo: true, submitOnRequireError: false, submitOnValidationError: false } });
6. Event handlers available.
reform.on('rf-send-before', function(e, parent) { // before sending data }); reform.on('rf-send-after', function(e, parent, result) { // after sending data }); reform.on('rf-validation-before', function(e) { // before validating form }); reform.on('rf-validation-after', function(e, errorFound) { // after validating form }); reform.on('rf-validate-custom', function(e, validationType, element) { // when a custom value is placed in the rf-val attribute }); reform.on('rf-initialize', function(e) { // on initi });
Changelog:
2018-08-20
- v1.0.10
2018-07-21
- Added missing ':'
This awesome jQuery plugin is developed by danielneubert. For more Advanced Usages, please check the demo page or visit the official website.