Шаблон ошибки Semantic-UI

Контейнер ошибок по умолчанию для семантических форм пользовательского интерфейса представляет собой просто красное поле со списком ошибок, в которое вы помещаете семантический код пользовательского интерфейса:

<div class="ui error message"></div>

Вот так: http://i.imgur.com/gJUTpdp.png

Но что я хотел бы сделать, так это изменить его, чтобы я мог настроить его и добавить к нему свои собственные заголовки.

На сайте семантического пользовательского интерфейса написано:

Шаблон сообщений об ошибках можно изменить, изменив настройки settings.template.error

Может кто-нибудь сказать мне, как я могу работать с шаблоном ошибки? Я понятия не имею, как работать с settings.template.error.

Обновление:

В дополнение к ответу Роба я понял из семантической документации пользовательского интерфейса, что вы также можете закодировать его следующим образом:

$.fn.form.settings.templates.error = 
function(errors) 
{
  var html = '<div class="ui header">Error Detected:</div>'
  html += '<ul class="list">';
  $.each(errors, function(index, value) {
    html += '<li>' + value + '</li>';
  });
  html += '</ul>';
  return $(html);
}

error-handling validation semantic-ui
person MTran    schedule 14.12.2014    source источник

Ответы (2)


arrow_upward
3
arrow_downward

(Глядя на источник) шаблон ошибки - это функция, которая принимает список ошибок и возвращает отображаемый html (как элемент jquery). Это реализация по умолчанию:

error: function(errors) {
  var
    html = '<ul class="list">'
  ;
  $.each(errors, function(index, value) {
    html += '<li>' + value + '</li>';
  });
  html += '</ul>';
  return $(html);
}

Вы должны попробовать что-то вроде:

$('.ui.form').form({ /*...*/ }, 
 {
    templates: {
       error: function(errors){
          //...
          return $('<div class="ui header">Error Header</div>...');
       }
    }
 });
person Rob    schedule 15.12.2014

arrow_upward
-1
arrow_downward

Обновление, на самом деле этот шаблон:

$.fn.form.settings.templates.prompt = function(errors) {
  return $('<div/>')
    .addClass('ui red prompt label')
    .html(errors[0])
  ;
}
person eveevans    schedule 19.07.2017