Слушайте ошибки проверки формы семантического UI перед отправкой

Question

Используя форму семантического UI, модальную и валидацию, у меня есть форма в модальной форме, и я не хочу, чтобы модальная функция закрывалась, если форма недействительна (что происходит при отправке).

Единственный способ, с помощью которого я могу остановить модальное закрытие, - это добавить класс disabled к кнопке отправки.

Я хочу прослушать форму (в режиме реального времени) и включить или выключить класс disabled в зависимости от текущего состояния проверки формы.

я могу только получить его на работу после того, как форма отправлена, но не в реальное время

$('#myForm') 
    .form({ 
     title: { 
      identifier : 'title', 
      rules: [ 
       { 
        type : 'empty', 
        prompt : 'Please enter a title' 
       }, 
       { 
        type : 'length[2]', 
        prompt : 'At least 6 characters' 
       } 
      ] 
     } 
    }, 
    { 
     onSuccess: function() { 
      $('#submit').removeClass('disabled'); 
     }, 
     onFailure: function() { 
      $('#submit').addClass('disabled'); 
     } 
    } 
); 

Answer 1

Вместо использования инвалидов представить, убедитесь, что модальный остается открытым даже при нажатии на подати (Modal утвердить) и принять решение о закрытии модальных к семантическим событиям проверки формы интерфейса (т.е. onSuccess).

Так что-то похожее на это:

$('.ui.modal').modal({ 
     onApprove : function() { 
      //Submits the semantic ui form 
      //And pass the handling responsibilities to the form handlers, 
      // e.g. on form validation success 
      $('.ui.form').submit(); 
      //Return false as to not close modal dialog 
      return false; 
     } 
    }); 

var formValidationRules = 
{ 
    title: { 
     identifier : 'title', 
     rules: [ 
      { 
       type : 'empty', 
       prompt : 'Please enter a title' 
      }, 
      { 
       type : 'length[2]', 
       prompt : 'At least 6 characters' 
      } 
     ] 
    } 
} 

var formSettings = 
{ 
    onSuccess : function() 
    { 
     //Hides modal on validation success 
     alert("Valid Submission, modal will close."); 
     $('.modal').modal('hide'); 
    } 
} 

$('.ui.form').form(formValidationRules, formSettings); 

Обратите внимание, что «OnApprove» событие срабатывает только при нажатии на кнопку модальной с классом «ОК». Так что вам нужно кнопка модальный так:

<div class="ui ok green basic inverted button"> 
    <i class="checkmark icon"></i> 
    Submit 
</div> 

Вот расширенный код рабочего plunker я создал, чтобы продемонстрировать это: http://plnkr.co/edit/5fK7UuJIm7QTJGiu23NL?p=preview

Answer 2

Вы можете использовать семантический API пользовательского интерфейса для предотвращения отправки формы.

$('.submit.button').api({ 
    beforeSend: function(settings) { 
     return false; 
    } 
}); 

Answer 3

Я столкнулся с той же проблемой и связался с разработчиком Semantic. Обратите внимание, что они собираются пересмотреть некоторые дополнительные, очевидные, отсутствующие формы поведения после запуска 2.0. Теперь вы можете посмотреть на этой ветке на их GitHub репо (в form.js файл): https://github.com/Semantic-Org/Semantic-UI/tree/next

Make использовать функцию is valid затычка, которая возвращает true/false если форма проверяет.

например.

if ($('form').form('is valid')) { 
    // do something 
} 

Это будет в 2.0

Answer 4

Комбинация решений от @DruidKuma и @Oniisaki работал для меня:

var formValidationRules; 

$(function() { 
    return $('.ui.modal').modal({ 
    onApprove: function() { 
     if ($('.ui.form').form('is valid')) { 
     return true; 
     } else { 
     return false; 
     } 
    } 
    }); 
}); 

formValidationRules = { 
    fields: { 
    name: 'empty' 
    } 
    // Additional validation fields would go here 
}; 

$(function() { 
    return $('.ui.form').form(formValidationRules); 
}); 

Изложить на onApprove обратного вызова, имейте в виду, что в дополнение к .ok (технически .action .ok класс селектор), обозначенный @DruidKuma, дополнительные селекторы классов от .action .positive и .action .approve также вызывают onApprove.

Answer 5

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

$("#myModal").modal({ 
    onApprove: function(e){ 
     $('#myModal .ui.form').submit(); 
     if (!$('#myModal .ui.form').form('is valid')) { 
      return false; 
     } 

     // Process the form data 

     return true; 
    } 
}); 

Надеюсь, это поможет кому-то.