https://www.dovepress.com/assets/js/addon/jquery.formtools.js

1/* Version 1.2 - 22-06-2011 */
2(function($){
3    $.fn.formTools = function(options){
4        var defaults = {
5            boxTop: -50,
6            boxLeft: 150,
7            background:'#f00',
8            border: 2,
9            borderColour: '#ffffff',
10            borderRadius: 0, /** only for chrome and firefox **/
11            position: 'absolute',
12            dropShadow: true,
13            padding: 5,
14            successMsg: 'The action was successful',
15            successRedirect: '',
16            debug: false,
17            onComplete: false,
18            onFail: false,
19            displayGlobalError: false
20        }
21                
22        options = $.extend(defaults, options);
23        
24        var errorBoxCss = {
25            'background': options.background,
26            'position': 'absolute',
27            '-moz-border-radius':options.borderRadius+"px",
28            'border-radius': options.borderRadius+"px",
29            'border':options.border+"px solid "+options.borderColour,
30            'color':'#ffffff',
31            'font-weight':'bold',
32            'font-size':'12px',
33            'max-width': '250px',
34            'z-index': '40000',
35            'display':'none',
36            'padding':options.padding,
37            'margin-top':options.boxTop+'px',
38            'margin-left':options.boxLeft+'px'
39        }
40        
41        var messageBoxCss = {
42            'width': '400px',
43            'height': '100px',
44            'position': 'fixed',
45            'background':'#5eaa56',
46            'top': '50%',
47            'left':'50%',
48            'margin-top': '-50px',
49            'margin-left':'-200px',
50            '-moz-box-shadow': '0 0 5px #000',
51            '-webkit-box-shadow': '0 0 5px #000',
52            'box-shadow': '0 0 5px #000',
53            'border':'1px solid white',
54            'z-index':'5005'
55        }
56           
57        var messageBoxContentCss ={
58            'text-align': 'center',
59            'height': '80px',
60            'margin-top': '10px',
61            'color': 'white',
62            'font-size':'20px',
63            'text-shadow': '#000 0px 0px 2px'
64        }
65        
66        var formToolsMessageBox = $('<div id="formToolsMessageBox"></div>');
67        var formToolsMessageBoxContent = $('<div id="formToolsMessageBoxContent"></div>');
68        
69        var getErrorId = function(formId, key, index){
70            var safeKey = (key + '').replace(/[^a-zA-Z0-9_-]/g, '_');
71            return formId + '_error_' + safeKey + '_' + index;
72        }
73        
74        var removeDescribedById = function(el, describedById){
75            var existing = $(el).attr('aria-describedby');
76            if (!existing) {
77                return;
78            }
79            var values = existing.split(/\s+/);
80            var filtered = [];
81            $.each(values, function(i, val){
82                if (val && val != describedById) {
83                    filtered.push(val);
84                }
85            });
86            if (filtered.length > 0) {
87                $(el).attr('aria-describedby', filtered.join(' '));
88            } else {
89                $(el).removeAttr('aria-describedby');
90            }
91        }
92        
93        formToolsMessageBox.css(messageBoxCss);
94        formToolsMessageBoxContent.css(messageBoxContentCss);
95                
96        return this.each(function(){
97            var obj = $(this);
98            
99            var formId = $(this).attr('id');
100
101            //var form_data = obj.serialize();
102            var form_data = new FormData(this);
103            var url = obj.attr('action');
104            var method = obj.attr('method');
105            
106            $.ajax({
107                type: method,
108                url: url,
109                data: form_data,
110                processData: false,
111                contentType: false,
112                success:function(msg){
113                    if (options.debug == true) {
114                        return false;
115                    }
116        
117                    if (isNaN(msg)) {
118                        var rtn = $.parseJSON(msg);
119
120                        if (typeof rtn == "object") {
121                            var success = rtn.success;
122                        }
123                    } else {
124                        var success = msg;
125                    }
126                    
127                    
128                    if (!isNaN(success)) {
129                        //form all good
130                        if (typeof options.onComplete == "function") {
131                            options.onComplete(msg);
132                        }
133                            
134                        if (options.successMsg != false) {
135                            $(formToolsMessageBox).append($(formToolsMessageBoxContent));
136                            $(formToolsMessageBoxContent).append(options.successMsg);
137                            $(formToolsMessageBox).attr('role', 'status');
138                            $(formToolsMessageBox).attr('aria-live', 'polite');
139                            $(formToolsMessageBox).attr('aria-atomic', 'true');
140                            $('body').append(formToolsMessageBox);
141                            
142                            if (options.successRedirect != false) {
143                                var continueLink = "<a href='"+options.successRedirect+"' style='display:block; margin-top:20px; color:white'>Continue</a>";
144                            } else {
145                                var continueLink = "<a href='#' style='display:block; margin-top:20px; color:white' id='formToolsMessageBoxContentClose'>Close</a>";
146                            }
147                            
148                            $(formToolsMessageBoxContent).append(continueLink);
149                            
150                            $(formToolsMessageBox).fadeIn('slow');
151
152                            
153                            $('#formToolsMessageBoxContentClose').click(function(){
154                                $(formToolsMessageBox).fadeOut('slow');
155                                $(formToolsMessageBox).remove();
156                                return false;

157                            });
158
159                        } else {
160                            if (options.successRedirect != false) {
161                                document.location=options.successRedirect;
162                            }
163                        }
164                        
165                    } else {
166                        var space;
167
168                        $('#' + formId + ' .input-error').removeClass('input-error');
169                        $('#' + formId + ' [aria-invalid="true"]').removeAttr('aria-invalid');
170                        $('#' + formId + ' [aria-describedby]').each(function(){
171                            var current = $(this).attr('aria-describedby');
172                            if (!current) {
173                                return;
174                            }
175                            var values = current.split(/\s+/);
176                            var filtered = [];
177                            $.each(values, function(i, val){
178                                if (val && val.indexOf(formId + '_error_') !== 0) {
179                                    filtered.push(val);
180                                }
181                            });
182                            if (filtered.length > 0) {
183                                $(this).attr('aria-describedby', filtered.join(' '));
184                            } else {
185                                $(this).removeAttr('aria-describedby');
186                            }
187                        });
188
189                        $("#" + formId).find(".myErrorBox").remove();
190                        $("#" + formId).closest('.tabs-padding').find("#site-message").remove();
191
192                        if (typeof options.onFail == "function"){
193                            options.onFail(rtn);
194                        }
195
196                        var errors_with_no_parents = '';
197                        var error_index = 0;
198                        
199                        $.each(rtn, function(key, value) { 
200                            var el = $('#' + formId + ' input[name=' + key + '], #' + formId + ' textarea[name=' + key + '], #' + formId + ' select[name=' + key + '], #' + formId + ' .' + key);
201
202                            if ($(el).length > 0) {
203                                var errorBox = $('<div class="myErrorBox"></div>');
204                                $(errorBox).html(value);
205                                
206                                var errorId = getErrorId(formId, key, error_index);
207                                error_index++;
208                                $(errorBox).attr('id', errorId);
209                                $(errorBox).attr('role', 'alert');
210                                $(errorBox).attr('aria-live', 'assertive');
211                                $(errorBox).attr('aria-atomic', 'true');
212
213                                if ($(el).length == 1) {
214                                    var holder = $(el).parent();
215                                    holder.append(errorBox);
216                                } else {
217                                    var holder = $(el).first().parent();
218                                    holder.append(errorBox);
219                                }
220
221                                $(holder).on('click', function(){
222                                    $(this).find('.input-error').removeClass('input-error');
223                                    $(this).find('input, textarea, select, [aria-invalid="true"]').removeAttr('aria-invalid');
224                                    $(this).find('input, textarea, select, [aria-describedby]').each(function(){
225                                        removeDescribedById(this, errorId);
226                                    });
227                                    $(this).find('.myErrorBox').remove();
228                                });
229                                $(holder).on('keyup', function(){
230                                    $(this).find('.input-error').removeClass('input-error');
231                                    $(this).find('input, textarea, select, [aria-invalid="true"]').removeAttr('aria-invalid');
232                                    $(this).find('input, textarea, select, [aria-describedby]').each(function(){
233                                        removeDescribedById(this, errorId);
234                                    });
235                                    $(this).find('.myErrorBox').remove();
236                                });
237                                if (options.displayGlobalError) {
238                                    errors_with_no_parents += '<p>' + value + '</p>';
239                                }
240
241                                $(el).addClass('input-error');
242                                $(el).attr('aria-invalid', 'true');
243                                $(el).each(function(){
244                                    var describedBy = $(this).attr('aria-describedby');
245                                    if (!describedBy) {
246                                        $(this).attr('aria-describedby', errorId);
247                                    } else if ((' ' + describedBy + ' ').indexOf(' ' + errorId + ' ') === -1) {
248                                        $(this).attr('aria-describedby', describedBy + ' ' + errorId);
249                                    }
250                                });
251
252                            } else {
253                                errors_with_no_parents += '<p>' + value + '</p>';
254                            }
255                        });
256
257                        if (errors_with_no_parents.length > 0) {
258                            var errorBox = $('<div id="site-message" class="error"></div>');
259                            $(errorBox).html(errors_with_no_parents);
260                            $(errorBox).attr('role', 'alert');
261                            $(errorBox).attr('aria-live', 'assertive');
262                            $(errorBox).attr('aria-atomic', 'true');
263                            $(errorBox).attr('tabindex', '-1');
264
265                            var form_parent = $("#" + formId).closest('.tabs-padding');

266                            form_parent.prepend(errorBox);
267                            $(errorBox).focus();
268                        }
269
270                        if ($('#' + formId + ' .myErrorBox').length > 0) {
271                            move_scroll = true;
272                            scroll_to = $('#' + formId + ' .myErrorBox').first().parent().offset().top;
273                            $('body,html').scrollTop(scroll_to - 50);
274                        }
275                        
276                        $('.myErrorBox').css(errorBoxCss);
277                        
278                        /*if(options.dropShadow == true){
279                            var shadowCss = {'-moz-box-shadow': '0 0 10px #000',
280                            '-webkit-box-shadow': '0 0 10px #000',
281                            'box-shadow': '0 0 10px #000'}
282                            $('.myErrorBox').css(shadowCss);
283                        }*/
284        
285                        $('.myErrorBox').fadeIn();
286                    }
287                }
288            });
289            
290        });
291    }
292})(jQuery);