Семантический пользовательский интерфейс: как предотвратить отправку формы после проверки валидации?

Question

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

Вот упрощенный пример:

<form class="ui form"> 
    <div class="field"> 
    <input name="username" type="text" placeholder="Username" autofocus> 
    </div> 
    <div class="field"> 
    <input name="password" type="password" placeholder="Password"> 
    </div> 
    <button type="submit" class="ui submit button">Login</button> 
    <div class="ui error message"></div> 
</form> 

---

$(function() { 

    $('form').form({ 
     username: { 
      identifier: 'username', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your username' 
      }] 
     }, 
     password: { 
      identifier: 'password', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your password' 
      }] 
     } 
    }, { 
     onFailure: function() { 
      // prevent form submission (doesn't work) 
      return false; 
     } 
    }); 

    // *** this API call should not be made when the form is invalid *** 
    $('form .submit.button').api({ 
     action: 'login', 
     method: 'post', 
     serializeForm: true, 
     dataType: 'text', 
     onSuccess: function() { 
      // todo 
     }, 
     onError: function() { 
      // todo 
     } 
    }); 

}); 

У меня также есть punkr here который демонстрирует меня вопрос.

Я что-то пропустил? Правильны ли звонки .api() и .form()?

Answer 1

Хорошо, я понял. Все, что нужно сделать, это изменить

$('form .submit.button').api(... 

в

$('form').api(... 

Я не понял, что я мог бы назвать .api() непосредственно на <form> элемента. Теперь вызов api не создается, когда форма недействительна, потому что форма не отправлена ​​(ранее у меня был вызов api на кнопку отправки, которая не отменяется, если форма недействительна).

Answer 2

Использовать событие onSuccess вместо метода api.

$('form').form({ 
     username: { 
      identifier: 'username', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your username' 
      }] 
     }, 
     password: { 
      identifier: 'password', 
      rules: [{ 
       type: 'empty', 
       prompt: 'Please enter your password' 
      }] 
     } 
    }, { 
     onFailure: function() { 
      // prevent form submission (doesn't work) 
      return false; 
     }, 
     onSuccess:function(event,fields){ 
      // prevent form submission 
      // api/ajax call 
      return false; 
     } 
    });