Сообщения об ошибках не появляются, когда Parsley.js вызывается в форме, находящейся в диалоге пользовательского интерфейса jQuery?

У меня есть форма, живущая внутри q jQuery UI модальный, и Parsley.js не работает должным образом, так как сообщения проверки не отображаются в пользовательском интерфейсе.

Это код, с которым я играл:

$(function() {
  $('#order_push').click(function() {
    $('#add_contact').dialog('open');
  });

  $('#add_contact').dialog({
    title: "Add Contact",
    autoOpen: false,
    modal: true,
    width: 600,
    height: 300,
    buttons: {
      'Create': function() {
        var $form = $('#contact_frm').parsley();

        if ($form.isValid()) {
          alert('valid');
        }
      }
    }
  });
});

И вот полный пример совместной работы HTML и JS. Если вы немного поиграете с этой скрипкой, оставив поля пустыми, вы увидите, как сообщения не отображаются. По крайней мере, я хотел бы, чтобы мое поле было отмечено красным, если оно недействительно, или зеленым, если оно действительно. Как то так

Я что-то здесь упустил?

Источник

2 ответа

Решение

Ты звонишь isValid, В документации говорится (жирным шрифтом!):

isValid: не влияет ни на пользовательский интерфейс, ни на события.

Вы хотите позвонить validate({force: true}) (или же whenValidate если делать асинхронную проверку)

Источник

Опираясь на ответ Marc-André Lafortune, который должен быть принят, так как он решает основную проблему...

О втором вопросе в комментариях:

Просто добавьте это, которое предназначено для элементов сообщения об ошибке Parsley:

if($form.on('form:error')){
  $(".parsley-errors-list").prev().addClass("error");
}

И этот CSS:

.error{
  border:2px solid red;
}

Теперь удалить класс ошибок на keyup:

$("input").on("keyup",function(){
  $(this).removeClass("error");
});

скрипка

Вы должны уделить время, чтобы прочитать документацию по Петрушке...
;)

Источник
Другие вопросы по тегам