Проверка формы семантического пользовательского интерфейса (только AJAX) - PullRequest
Новая
       26

Проверка формы семантического пользовательского интерфейса (только AJAX)

0 голосов
/ 08 октября 2019

Я работаю над простой формой включения и выключения сотрудника, и, хотя она у меня сейчас работает, к моему удовлетворению, я подумала, что опрошу сообщество, чтобы выяснить, может ли пара надоедливых вопросов, которые у меня еще есть,есть ответы.

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

Form screenshot

Основная структура HTML, которая генерирует эту форму, выглядит следующим образом (извините за изображение, ноЯ не хочу запутывать вещи слишком большим количеством деталей):

form page HTML structure

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

      //- show/hide password when button is clicked
      $('#show-hide').click(function() {
        var x = $('#p1');
        var y = $('#p2');
        console.log(x.attr('type'));
        console.log(y.attr('type'));
        if (x.attr('type') === "password") {
          x.attr('type', 'text');
          y.attr('type', 'text');
        } else {
          x.attr('type', 'password');
          y.attr('type', 'password');
        }
      });

      //- form field validation rules (see semantic-ui documentation)
      $('#new-password-form').form({
        /* inline: true, */
        on: 'blur',
        fields: {
          p1: ['empty', 'regExp[/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/]'],
          p2: 'match[password]',
          sq: 'empty',
        },
        onSuccess: function(event, fields){
          alert('form validation succeeded! ' + Date.now());
          //AJAX call goes here.
          return false;
        },//onSuccess:
        /* onFailure: function(formErrors, fields){
        },//onFailure */
      });

      //- show/hide error message divs as appropriate on form field focus changes
      $('input, select, textarea').focus(function(){
        if ($("#p1").parent().hasClass('error')){ 
          $('#p1_error').removeClass('hidden');
        }else{
          $('#p1_error').addClass('hidden');
        }            
        if ($("#p2").parent().hasClass('error')) {
          $('#p2_error').removeClass('hidden');
        }else{
          $('#p2_error').addClass('hidden');
        }
        if ($("#sq").parent().hasClass('error')) {
          $('#sc_error').removeClass('hidden');
        }else{
          $('#sc_error').addClass('hidden');
        }  
      });

В одной точке все реализовано с использованием семантического расширенного синтаксиса проверки, включая сообщения об ошибках. Но я закончил тем, что отказался от этого в пользу пользовательских скрытых плавающих элементов div (используя семантические виджеты), которые я раскрыл с помощью вышеописанной логики javascript, основанной на том, что семантика прошла / не прошла правила валидации (наличие / отсутствие класса ошибок в родительском div). ).

Мои вопросы

  1. Как мне получить встроенный проверочный код для выдачи довольно встроенных сообщений об ошибках, как у меня ниже (см. Изображения и пояснения ниже)
  2. Каким образом можно управлять размещением сообщения об ошибке при проверке inline? Основная причина, по которой я отказался от встроенных плавающих div-ов ошибок, заключалась в том, что я не мог заставить их отображать указатели в правильном направлении и в нужном месте, и, похоже, нигде не было найдено документации, обсуждающей это.

Моя текущая реализация Как реализовано, моя форма повторно проверяется каждый раз при изменении фокуса на поле ввода. Сообщения об ошибках отображаются или удаляются в зависимости от состояния проверки каждого поля. Все поля формы проверяются при каждом изменении фокуса. Поскольку я использую плавающий div для сообщения об ошибке, при его отображении не создается и не требуется дополнительное пространство, а внешний вид сохраняется.

enter image description here

Единственное, что беспокоит меня, но все же помимо моих вопросов выше, это то, что мне пришлось переопределить атрибут left с помощью встроенного стиля в div ошибок, чтобы они отображались правильно,Например: 

<div class="ui red basic floating pointing below label" id="p1_error" style="left: unset;">
  Minimum length of 8; including upper and lower case characters, digit(s), and symbol(s).
</div>

По умолчанию css (left: 100%;) помещает плавающую ошибку div в правую сторону, что мне кажется странным. Вот как это выглядит.

no css override example

Уродливо. Если есть кто-то, кто может показать нам, как получить такое же поведение со встроенными сообщениями об ошибках, код будет более элегантным и эффективным. В идеале мы могли бы указать, где находится ошибка (влево, вправо, вверху, внизу) и каким образом она указывает. Заранее спасибо.

...