Семантической форма проверки 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> 

Все работает, как ожидался но одно. После того, как пользователь нажимает кнопку отправки, semantic ui проверяет форму на соответствие правилам проверки, и если она преуспеет, она разрешает отправку формы, но если это не так, она показывает сообщения об ошибках и HIDES кнопка отправки. После этого, даже когда пользователь фиксирует значения формы, он по-прежнему показывает ошибки в нижней части формы, а кнопка отправки - STILL. Использование клавиши ввода для отправки формы работает, но это не очень очевидно.

Как я могу убедиться, что Semantic UI показывает кнопку отправки еще раз после того, как форма зафиксирована ??

Answer 1

Оказывается, на самом деле это не скроет. Он просто перекрывает его. Простой Bootstrap как 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; 
}