セマンティック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はフォームを検証ルールと照合し、成功すればフォームを送信できますが、そうでない場合はエラーメッセージを表示し、HIDES送信ボタンを表示します。その後、ユーザーがフォームの値を修正してもフォームの下部にエラーが表示され、送信ボタンSTILLが非表示になります。入力キーを使用してフォームを送信しても、それは非常に明白な方法ではありません。

フォームが修正された後、セマンティックUIに送信ボタンが再度表示されるようにするにはどうすればよいですか？

Answer 1

は、それが実際にそれを隠していませんが判明します。それは単にそれをオーバラップします。ボタンの後にclearfix divのような単純なブートストラップが問題を修正します。

.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; 
} 

： clearfixがある

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