├── LICENSE.md ├── README.md └── src └── laravel-bootstrap-modal-form.js /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Jesse Leite 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Laravel-Bootstrap-Modal-Form 2 | 3 | A form validation extension for your Laravel app. Use when embedding a [Bootstrap form](http://getbootstrap.com/css/#forms) into a [Bootstrap/jQuery modal](http://getbootstrap.com/javascript/#modals). This script keeps modal open, submits form via AJAX, queries your [Laravel validation](http://laravel.com/docs/validation) rules, and populates error messages. 4 | 5 | ![Demo](http://zippy.gfycat.com/DefensiveFlickeringKilldeer.gif) 6 | 7 | # Requirements 8 | 9 | - [Bootstrap CSS](http://getbootstrap.com/css/) 10 | - [Bootstrap JS](http://getbootstrap.com/javascript/) 11 | - [jQuery](http://jquery.com) 12 | 13 | # Quick Installation 14 | 15 | Via [Bower](http://bower.io): 16 | ``` 17 | bower install jerseymilker/laravel-bootstrap-modal-form --save 18 | ``` 19 | 20 | # Basic Usage 21 | 22 | - Embed [Bootstrap form](http://getbootstrap.com/css/#forms) into [Bootstrap/jQuery modal](http://getbootstrap.com/javascript/#modals). 23 | - Setup [Laravel validation](http://laravel.com/docs/validation). 24 | - Include this script. 25 | - Add `class="bootstrap-modal-form"` to form. 26 | - Add `class="bootstrap-modal-form-open"` to modal open button. 27 | 28 | # Additional Notes 29 | 30 | - Script does not handle CSRF tokens. Use Laravel's [_token field](http://laravel.com/docs/5.0/routing#csrf-protection) in your forms if needed. 31 | - Script submits via `POST` form action. Use Laravel's [method spoofing](http://laravel.com/docs/5.0/routing#method-spoofing) if you need to submit via `PUT`, `PATCH`, or `DELETE`. 32 | - If script detects file input, FormData object will be used (requires IE10+, more info on [browser compatibility here](https://developer.mozilla.org/en/docs/Web/API/FormData#Browser_compatibility)). 33 | 34 | # Shameless Plug 35 | 36 | I highly recommend [BootForms](http://github.com/adamwathan/bootforms) form builder package by [Adam Wathan](https://twitter.com/adamwathan). This is a great helper which makes generating Bootstrap form markup super easy. It even auto-detects Laravel's validation state and outputs error messages for most field types. 37 | 38 | Example: 39 | ```php 40 | {!! BootForm::text('First Name', 'first_name') !!} 41 | ``` 42 | Generates: 43 | ```php 44 |
45 | 46 | 47 | {!! $errors->first('first_name', '

:message

') !!} 48 |
49 | ``` 50 | -------------------------------------------------------------------------------- /src/laravel-bootstrap-modal-form.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Laravel-Bootstrap-Modal-Form (https://github.com/JerseyMilker/Laravel-Bootstrap-Modal-Form) 3 | * Copyright 2015 Jesse Leite - MIT License 4 | * 5 | * Bromance: 6 | * Adam Wathan has nice boots. Thank you for BootForms magic. 7 | * Matt Higgins has nice beard. Thank you for JS wizardry. 8 | */ 9 | 10 | $('document').ready(function() { 11 | 12 | // Prepare reset. 13 | function resetModalFormErrors() { 14 | $('.form-group').removeClass('has-error'); 15 | $('.form-group').find('.help-block').remove(); 16 | } 17 | 18 | // Intercept submit. 19 | $('form.bootstrap-modal-form').on('submit', function(submission) { 20 | submission.preventDefault(); 21 | 22 | // Set vars. 23 | var form = $(this), 24 | url = form.attr('action'), 25 | submit = form.find('[type=submit]'); 26 | 27 | // Check for file inputs. 28 | if (form.find('[type=file]').length) { 29 | 30 | // If found, prepare submission via FormData object. 31 | var input = form.serializeArray(), 32 | data = new FormData(), 33 | contentType = false; 34 | 35 | // Append input to FormData object. 36 | $.each(input, function(index, input) { 37 | data.append(input.name, input.value); 38 | }); 39 | 40 | // Append files to FormData object. 41 | $.each(form.find('[type=file]'), function(index, input) { 42 | if (input.files.length == 1) { 43 | data.append(input.name, input.files[0]); 44 | } else if (input.files.length > 1) { 45 | data.append(input.name, input.files); 46 | } 47 | }); 48 | } 49 | 50 | // If no file input found, do not use FormData object (better browser compatibility). 51 | else { 52 | var data = form.serialize(), 53 | contentType = 'application/x-www-form-urlencoded; charset=UTF-8'; 54 | } 55 | 56 | // Please wait. 57 | if (submit.is('button')) { 58 | var submitOriginal = submit.html(); 59 | submit.html('Please wait...'); 60 | } else if (submit.is('input')) { 61 | var submitOriginal = submit.val(); 62 | submit.val('Please wait...'); 63 | } 64 | 65 | // Request. 66 | $.ajax({ 67 | type: "POST", 68 | url: url, 69 | data: data, 70 | dataType: 'json', 71 | cache: false, 72 | contentType: contentType, 73 | processData: false 74 | 75 | // Response. 76 | }).always(function(response, status) { 77 | 78 | // Reset errors. 79 | resetModalFormErrors(); 80 | 81 | // Check for errors. 82 | if (response.status == 422) { 83 | var errors = $.parseJSON(response.responseText); 84 | 85 | // Iterate through errors object. 86 | $.each(errors, function(field, message) { 87 | console.error(field+': '+message); 88 | //handle arrays 89 | if(field.indexOf('.') != -1) { 90 | field = field.replace('.', '['); 91 | //handle multi dimensional array 92 | for (i = 1; i <= (field.match(/./g) || []).length; i++) { 93 | field = field.replace('.', ']['); 94 | } 95 | field = field + "]"; 96 | } 97 | var formGroup = $('[name='+field+']', form).closest('.form-group'); 98 | formGroup.addClass('has-error').append('

'+message+'

'); 99 | }); 100 | 101 | // Reset submit. 102 | if (submit.is('button')) { 103 | submit.html(submitOriginal); 104 | } else if (submit.is('input')) { 105 | submit.val(submitOriginal); 106 | } 107 | 108 | // If successful, reload. 109 | } else { 110 | location.reload(); 111 | } 112 | }); 113 | }); 114 | 115 | // Reset errors when opening modal. 116 | $('.bootstrap-modal-form-open').click(function() { 117 | resetModalFormErrors(); 118 | }); 119 | 120 | }); 121 | --------------------------------------------------------------------------------