2016-03-17 2 views
0

Мы используем bootstrapValidator проверить все наши формы, но и на форму авторизации, если пользователь нажимает ввести или возвращение и все справедливо, ничего не происходит.BootstrapValidator игнорирование Введите нажатие на полной форме

Вот HTML мы используем:

<form id="signin" name="signin" class="validate-live" method="POST"> 
    <fieldset> 
     <!-- Email --> 
     <div class="form-group"> 
      <label class="control-label sr-only" for="email">Email</label> 
      <input id="email" name="email" type="email" placeholder="Email" 
       class="form-control" 
       data-bv-notempty="true" 
       data-bv-notempty-message="Please enter your email" 
      > 
     </div> 

     <!-- Password --> 
     <div class="form-group"> 
      <label class="control-label sr-only" for="password">Password</label> 
      <input id="password" name="password" type="password" placeholder="Password" 
       class="form-control" 
       data-bv-notempty="true" 
       data-bv-notempty-message="Please enter your password" 
      > 
     </div> 

     <button type="submit" id="submit_button" name="submit_button" class="btn btn-primary btn-block btn-next">Sign in</button> 
     <a href="reset-password.php" class="btn btn-link-secondary btn-forgot" >Forgot password?</a>    
     </fieldset> 
    </form> 

и код bootstrapValidator:

$(document).ready(function() { 
    $('.validate-live').bootstrapValidator({ 
     live: 'enabled', 
     message: 'This value is not valid', 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     submitButtons: '#submit_button', 
     trigger: null 
    }).on('error.field.bv', function(e, data) { 
     data.bv.disableSubmitButtons(true); 
    }).on('success.field.bv', function(e, data) { 
     data.bv.disableSubmitButtons(false); 
     if (data.bv.getInvalidFields().length>0) { 
      data.bv.disableSubmitButtons(true); 
     } 
    }); 
}); 

Я добавил некоторые console.logs для обработчиков событий, и они показали, что валидатор активируется при нажатии клавиш, а если форма недействительна, то приглашения отображаются, но если штраф в форме ничего не происходит, пока пользователь фактически не нажимает кнопку #submit_button.

ответ

0

Не видя никаких оснований для назначения submitButtons: '#submit_button'

Просто удалите submitButtons: '#submit_button', исправит эту проблему.

JS

$(document).ready(function() { 
    $('.validate-live').bootstrapValidator({ 
    live: 'enabled', 
    message: 'This value is not valid', 
    feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    //submitButtons: '#submit_button', 
    trigger: null 
    }).on('error.field.bv', function(e, data) { 
    data.bv.disableSubmitButtons(true); 
    }).on('success.field.bv', function(e, data) { 
    data.bv.disableSubmitButtons(false); 
    if (data.bv.getInvalidFields().length > 0) { 
     data.bv.disableSubmitButtons(true); 
    } 
    }); 
}); 

HTML

<form id="signin" name="signin" class="validate-live" method="POST"> 
    <fieldset> 
    <!-- Email --> 
    <div class="form-group"> 
     <label class="control-label sr-only" for="email">Email</label> 
     <input id="email" name="email" type="email" placeholder="Email" class="form-control" data-bv-notempty="true" data-bv-notempty-message="Please enter your email"> 
    </div> 

    <!-- Password --> 
    <div class="form-group"> 
     <label class="control-label sr-only" for="password">Password</label> 
     <input id="password" name="password" type="password" placeholder="Password" class="form-control" data-bv-notempty="true" data-bv-notempty-message="Please enter your password"> 
    </div> 

    <button type="submit" id="submit_button" name="submit_button" class="btn btn-primary btn-block btn-next">Sign in</button> 
    <a href="reset-password.php" class="btn btn-link-secondary btn-forgot">Forgot password?</a> 
    </fieldset> 
</form> 

Working Fiddle

+0

Что если моя форма была несколько кнопок? Код JS хранится во включенном файле и используется на нескольких страницах с множеством разных форм. –

+0

изменить 'тип' всех других кнопок с' submit' на 'button' – Shehary

+0

, если это поможет https://jsfiddle.net/tnzj9foy/1 /, существует другой способ привязать кнопку отправки формы с помощью bootstrapValidator без использования других нескольких кнопок или изменения их типа – Shehary