語義UI onSuccess，onFailure回調沒有在表單驗證時被觸發

Question

在以下驗證用戶名具有值並且密碼匹配的代碼中，即使正在執行驗證規則，onSuccess和onFailure回調也不會被觸發/執行。我已經測試了這個獨立的其他部分，並且這個佈局完全遵循了文檔，所以我排除了語法錯誤。除了以下使用的語法外，我還嘗試了格式$（）.form（）。onSuccess（）。onFailure（），但得到了「Uncaught TypeError：onSuccess不是函數」。這裏撥動：Semantic UI onSuccess, onFailure callback example。

$(function(){ 
    $('#main') 
     .form({ 
      on: 'blur', 
      fields: { 
       username: { 
        identifier : 'username', 
        rules: [ 
         { 
          type : 'empty' 
         } 
        ] 
       }, 
       password1: { 
        identifier : 'password1', 
        rules: [ 
         { 
          type : 'match[password2]', 
          prompt : 'Please enter the same value in both fields' 
         } 
        ] 
       }, 
       password2: { 
        identifier : 'password2', 
        rules: [ 
         { 
          type : 'match[password1]', 
          prompt : 'Please enter the same value in both fields' 
         } 
        ] 
       } 
      }, 
      onSuccess: function() { 
       $(".ui.button[name='account']").removeClass('disabled'); 
       console.log('Success'); 
      }, 
      onFailure: function() { 
       $(".ui.button[name='account']").addClass('disabled'); 
       console.log('Failure'); 
      } 
     } 
    ); 
}); 

Answer 1

關鍵是這樣調用它。 $('#main').form(fieldRules, settings); onFailure和onSuccess已在設置中註冊。

看一看的修改後的代碼：

$(function(){ 
     $('#main') 
      .form({ 
        username: { 
         identifier : 'username', 
         rules: [ 
          { 
           type : 'empty' 
          } 
         ] 
        }, 
        password1: { 
         identifier : 'password1', 
         rules: [ 
           { 
            type: 'empty', 
           prompt: 'Please enter the password' 
           }, 
          { 
           type : 'match[password2]', 
           prompt : 'Please enter the same value in both fields' 
          } 
         ] 
        }, 
        password2: { 
         identifier : 'password2', 
         rules: [ 
          { 
           type : 'match[password1]', 
           prompt : 'Please enter the same value in both fields' 
          } 
         ] 
        } 
       }, { 
        on: 'blur', 
        inline: true, 
        onSuccess: function() { 
        alert('Success'); 
        return false; // false is required if you do don't want to let it submit 

        }, 
        onFailure: function() { 
        alert('Failure'); 
        return false; // false is required if you do don't want to let it submit            
        } 
        }); 
    }); 

Answer 2

我就遇到了這個問題爲好。我什麼都試過，我的onSuccess火災的唯一方法是這樣：

const formValidated = $('.ui.form').form(
    { 
     fields: { 
      name: { 
       identifier: 'name', 
       rules: [ 
       { 
        type : 'empty', 
        prompt : 'Please enter a name for the camera' 
       } 
       ] 
      }, 
     } 
    } 
) 

    if ($(formValidated).form('is valid')) { 
    this.handleSave(); 
    } else { 
    return false; 
    }