MDL-55417 forms: Render form elements with a template
[moodle.git] / theme / noname / templates / core_form / element-autocomplete.mustache
1 <div class="form-group row {{#error}}has-danger{{/error}}">
2     <label class="col-md-3 col-form-label" for="{{element.id}}">
3         {{{label}}} {{{helpbutton}}}
4     </label>
5     <div class="col-md-9 form-inline">
6         <select class="custom-select {{#error}}form-control-danger{{/error}}" name="{{element.name}}"
7             id="{{element.id}}"
8             {{#element.multiple}}multiple{{/element.multiple}}
9             {{#element.frozen}}readonly disabled{{/element.frozen}}
10             {{#error}}
11                 autofocus aria-describedby="id_error_{{element.name}}"
12             {{/error}}
13             {{#element.attributes}}
14                 {{name}}={{#quote}}{{value}}{{/quote}} ddd
15             {{/element.attributes}}
16             >
17             {{#element.options}}
18             <option value="{{value}}" {{#selected}}selected{{/selected}}>{{text}}</option>
19             {{/element.options}}
20         </select>
21         <div class="form-control-feedback" id="id_error_{{element.name}}" {{^error}} style="display: none;"{{/error}}>
22             {{{error}}}
23         </div>
24     </div>
25 </div>
26 {{#js}}
27 require(['jquery', 'core/event'], function($, Event) {
28     var element = document.getElementById('{{element.id}}');
29     $(element).on(Event.Events.FORM_FIELD_VALIDATION, function(event, msg) {
30         event.preventDefault();
31         var parent = $(element).closest('.form-group');
32         var feedback = parent.find('.form-control-feedback');
33         if (msg !== '') {
34             parent.addClass('has-danger');
35             $(element).addClass('form-control-danger');
36             $(element).attr('aria-describedby', $(element).attr('id') + '-feedback');
37             feedback.html(msg);
38             feedback.show();
39         } else {
40             parent.removeClass('has-danger');
41             $(element).removeClass('form-control-danger');
42             $(element).attr('aria-describedby', '');
43             feedback.hide();
44         }
45     });
46 });
47 {{/js}}