Use html5 to validate setup form, use html5 fallback if client does not support this feature

Add modernizr to admin group

lib/conf.d/minifyGroupsConfig.php

@@ -35,7 +35,8 @@ $groups = array(
         , '//include/jquery.image_enhancer.js'
         , '//include/jslibs/jquery.contextmenu_scroll.js'),
     'admin' => array(
-        '//include/jslibs/jquery.validate.js'
+        '//assets/modernizr/modernizr.js'
+        ,'//include/jslibs/jquery.validate.js'
         , '//include/jslibs/jquery.validate.password.js'
         , '//include/jslibs/jquery-ui-1.8.24.js'
         , '//include/jslibs/jquery.cookie.js'

templates/web/admin/index.html.twig

@@ -29,7 +29,9 @@
         create_template :  '{% trans 'Creer un model' %}',
         create_user :  '{% trans 'Creer un utilisateur' %}',
         annuler :  '{% trans 'boutton::annuler' %}',
-        errorFileApiTooBig :  '{% trans 'This file is too big' %}'
+        errorFileApiTooBig :  '{% trans 'This file is too big' %}',
+        requiredValue: '{% trans 'This field is required' %}',
+        attention: '{% trans 'Attention' %}'
     };
 
     function sessionactive(){
@@ -61,8 +63,7 @@
     };
 
     function enableForms(forms) {
-        forms.bind('submit', function(){
+        forms.bind('submit', function(event){
-
             var method = $(this).attr('method');
             var url = $(this).attr('action');
             var datas = $(this).serializeArray();

templates/web/admin/setup.html.twig

@@ -31,23 +31,12 @@
     </div>
 </form>
 
-{% set rules = [] %}
-{% set messages = [] %}
-
 <form id="GV_form" class="form-horizontal" method="post" action = "{{ path('setup_submit_globals') }}">
     {% for section in GV %}
         <div class="section">
             <h1> {{ section['section'] }} </h1>
 
             {% for value in section['vars'] %}
-
-                {% autoescape true js %}
-                    {% if value['required'] is defined %}
-                        {% set rules = rules | merge({ (value['name']) : {required : (value['required']) }})%}
-                        {% set messages = messages | merge({ (value['name']) : {required : ('Required field'| trans ) }})%}
-                    {% endif %}
-                {% endautoescape %}
-
                 {% set readonly = false %}
                 {% if value['readonly'] is defined and value['readonly'] == true %}
                     {% set readonly = true %}
@@ -66,14 +55,14 @@
                     <div class="controls">
                         <label class="control-label" for="id_{{ value['name'] }}"><span class="NEW">{{ is_new == false ? 'NEW' : '' }} </span>{{ value['comment'] | raw }}</label>
                         {% if value['type'] == 'boolean' %}
-                            <label class="radio inline" for="id_{{ value['name'] }}_no"><input {{ readonly ? 'readonly="readonly"' : '' }} {{ currentValue == '0' ? 'checked="selected"' : '' }} type="radio"  name="{{ value['name'] }}" value="False" id="id_{{ value['name'] }}_no" />False</label>
+                            <label class="radio inline" for="id_{{ value['name'] }}_no"><input {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : '' }} {{ currentValue == '0' ? 'checked="selected"' : '' }} type="radio"  name="{{ value['name'] }}" value="False" id="id_{{ value['name'] }}_no" />False</label>
-                            <label class="radio inline" for="id_{{ value['name'] }}_yes"><input {{ readonly ? 'readonly="readonly"' : '' }} {{ currentValue == '1' ? 'checked="checked"' : '' }} type="radio"  name="{{ value['name'] }}" value="True" id="id_{{ value['name'] }}_tes" />True</label>
+                            <label class="radio inline" for="id_{{ value['name'] }}_yes"><input {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : '' }} {{ currentValue == '1' ? 'checked="checked"' : '' }} type="radio"  name="{{ value['name'] }}" value="True" id="id_{{ value['name'] }}_tes" />True</label>
                         {% elseif value['type'] == 'string' %}
-                            <input {{ readonly ? 'readonly="readonly"' : '' }} name=" {{ value['name'] }}" id="id_{{ value['name'] }}" type="text" value="{{ currentValue }}"/>
+                            <input {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}" type="text" value="{{ currentValue }}"/>
                         {% elseif value['type'] == 'text' %}
                             <textarea {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}">{{ currentValue }}</textarea>
                         {% elseif value['type'] == 'enum' %}
-                            <select {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}">
+                            <select {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}">
                                 {% if value['available'] is defined and value['available'] is iterable %}
                                     {% for key, val in value['available'] %}
                                         <option value="{{ key }}" {{ currentValue == key ? 'selected="selected"' : '' }} >{{ val }}</option>
@@ -91,7 +80,7 @@
                             {% if value['available'] is defined and value['available'] is iterable %}
                                 {% for key, availableValue in value['available'] %}
                                     <label class="checkbox">
-                                        <input type="checkbox" name="{{ value['name'] ~ '[]' }}" {{ readonly ? 'readonly="readonly"' : ''}} value="{{ key }}" {{ currentValue is iterable and key in currentValue| keys ? 'checked="checked"' : '' }} /> {{ availableValue }}</label>
+                                        <input type="checkbox" name="{{ value['name'] ~ '[]' }}" {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : ''}} value="{{ key }}" {{ currentValue is iterable and key in currentValue| keys ? 'checked="checked"' : '' }} /> {{ availableValue }}</label>
                                 {% endfor %}
                             {% else %}
                                 <p class='alert'>
@@ -102,15 +91,15 @@
                                 </p>
                             {% endif %}
                         {% elseif value['type'] == 'integer' %}
-                                <input {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}" type="text" value="{{ currentValue }}"/>
+                                <input {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}" type="text" value="{{ currentValue }}"/>
                         {% elseif value['type'] == 'password' %}
-                                <input {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}" type="password" value="{{ currentValue }}"/>
+                                <input {{ value['required'] is defined ? 'required="required"' : '' }} {{ readonly ? 'readonly="readonly"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}" type="password" value="{{ currentValue }}"/>
                         {% elseif value['type'] == 'timezone' %}
                             {% if currentValue is not empty %}
                                 {% set date = date() %}
                                 {% set currentValue = date.getTimezone().getName() %}
                             {% endif %}
-                                <select name="{{ value['name'] }}" id="id_{{ value['name'] }}">
+                                <select {{ value['required'] is defined ? 'required="required"' : '' }} name="{{ value['name'] }}" id="id_{{ value['name'] }}">
                                     {% set times = [] %}
                                     {% for k, v in listTimeZone %}
                                         {% for val in v %}
@@ -139,15 +128,41 @@
 
 <script type='text/javascript'>
     {% autoescape false %}
-    $(document).ready(function() {
+        $(document).ready(function() {
-        // validate signup form on keyup and submit
+            // use html5 fallback validation if browser do not support required attribute
-        $("#GV_form").validate({
+            var form = $("#GV_form");
-            rules: {{ rules|json_encode() }},
+            var inputs = form.find("input, select, textarea");
-            messages: {{ messages|json_encode() }},
+            // if required not supported, emulate it
-            errorPlacement: function(error, element) {
+            if (!Modernizr.input.required) {
-                error.prependTo( element.parent().next() );
+                form.bind("submit", function (event) {
+                    var required = [];
+                    // loop through input elements looking for required
+                    $.each(inputs, function(k, input){
+                        var input = $(input);
+                        if (typeof input.attr('required') !== "undefined") {
+                            // if the value is empty, add to required array
+                            if (input.val().replace(/^\s+|\s+$/g, '') === '') {
+                                required.push(input.attr('name'));
+                            }
+                        }
+                    });
+
+                    // show popover if required array contains any elements
+                    if (required.length > 0) {
+                        $.each(required, function(k, name) {
+                            var $this = $("input[name="+name+"], select[name="+name+"], textarea[name="+name+"]");
+                            $this.popover({ title: language.attention, content: language.requiredValue, placement:"bottom" })
+                            .blur(function () {
+                                $this.popover('hide');
+                            });
+                            $this.popover("show");
+                        });
+                        // prevent the form from being submitted
+                        event.stopImmediatePropagation();
+                        return false;
+                    }
+                });
             }
         });
-    });
     {% endautoescape %}
 </script>