語義UI形式驗證不會實時更新

Question

所以我有這個語義UI標準形式：

<form id="signup-form" class="ui form" method="post"> 
    <div class="field"> 
     <label>name</label> 
     <input type="text" name="fullname" id="fullname"> 
    </div> 
    <div class="field"> 
     <label>username</label> 
     <input type="text" name="username" id="username"> 
    </div> 
    <div class="field"> 
     <label>email</label> 
     <input type="email" name="email" id="email"> 
    </div> 
    <div class="two fields"> 
     <div class="field"> 
      <label>password</label> 
      <input type="password" name="password" id="password"> 
     </div> 
     <div class="field"> 
      <label>password repeat</label> 
      <input type="password" name="password-repeat" id="password-repeat"> 
     </div> 
    </div> 
    <div class="field"> 
     <div class="ui checkbox"> 
      <input type="checkbox" name="terms" id="terms" tabindex="0" class="hidden"> 
      <label>I accept the terms and conditions</label> 
     </div> 
    </div> 
    <button type="submit" value="signup" class="ui blue submit button pull-left">Sign Up</button> 
    <div class="ui error message"></div> 
</form> 

這是驗證腳本使用：

<script> 
$('#signup-form').form({ 
    fields: { 
     fullname: { 
      identifier: 'fullname', 
      rules: [ 
       { 
        type: 'empty', 
        prompt: 'can not be empty' 
       } 
      ] 
     }, 
     username: { 
      identifier: 'username', 
      rules: [ 
       { 
        type: 'empty', 
        prompt: 'can not be empty' 
       } 
      ] 
     }, 
     email: { 
      identifier: 'email', 
      rules: [ 
       { 
        type: 'email', 
        prompt: 'can not be empty' 
       } 
      ] 
     }, 
     password: { 
      identifier: 'password', 
      rules: [ 
       { 
        type: 'empty', 
        prompt: 'can not be empty' 
       }, 
       { 
        //type: 'regExp[/^[a-z0-9_-]{6,16}$/]', 
        type: 'regExp[/^[a-zA-Z0-9_]{6,16}$/]', 
        prompt: 'not valid' 
       } 
      ] 
     }, 
     password_repeat: { 
      identifier: 'password-repeat', 
      rules: [ 
       { 
        type: 'match[password]', 
        prompt: 'must match the password' 
       } 
      ] 
     }, 
     terms: { 
      identifier: 'terms', 
      rules: [ 
       { 
        type: 'checked', 
        prompt: 'must accept the rules' 
       } 
      ] 
     } 
    } 
}); 
</script> 

一切正常但有一點。用戶點擊提交按鈕後，語義ui根據驗證規則檢查表單，如果成功，則表單將被提交，但如果不提交，則顯示錯誤消息和提交按鈕。之後，即使用戶修改了表單的值，它仍然會在表單底部顯示錯誤，並且提交按鈕是隱藏的仍然。使用回車鍵提交表單作品，但這不是一個非常明顯的方法。

如何確保Semantic UI在表單固定後再次顯示提交按鈕？

Answer 1

原來，它實際上並沒有隱藏它。它只是重疊它。一個簡單的引導程序，如clearfix div按鈕修復問題後。

<button type="submit" value="signup" class="ui blue submit button pull-left">Sign Up</button> 
<div class="clearfix"></div> 

其中clearfix是：

.clearfix, 
.clearfix:before, 
.clearfix:after, 
.container:before, 
.container:after, 
.container-fluid:before, 
.container-fluid:after, 
.row:before, 
.row:after { 
    content: " "; 
    display: table; 
} 
.clearfix:after, 
.container:after, 
.container-fluid:after, 
.row:after { 
    clear: both; 
}