Бутстрап JS валидатор и форма submit

Question

Я использую этот валидатор Bootstrap github.com/1000hz/bootstrap-validator для моих форм бутстрапа, но, похоже, не существует способа установить какой-либо внешний JS-условие перед отправкой форм.

Например, я хотел бы сделать следующее из внешних файлов JS:

1 # если форма или некоторый входной формы недействительна с помощью валидатора(), то я делаю какие-то действия.

2 # else Пользователи получат сообщение загрузки загрузочной кнопки, пока все не будет отправлено в базы данных.

Вы можете иметь один случай здесь:

$('button[data-loading-text]').click(function() { 
    var btn = $(this); 
    btn.button('loading'); 
    $.blockUI(); 

// #1 if form is invalid using validator() then I unblock the please wait message $.unblockUI(); and reset the bootstrap loading button. 
// #2 else users will still see the "please wait" message + bootsrap loading button untill everything is submitted into the databases. 
});   

http://jsfiddle.net/temgo/k07nx06k/12/

Любая помощь будет оценена, как представляется, что плагин события устанавливаются только для конкретного поля не для полной проверки формы.

С уважением

Answer 1

Отъезд События раздел на 1000HZ странице. (http://1000hz.github.io/bootstrap-validator/#validator-events)

Если вы хотите активировать действие перед проверкой - просто слушайте событие.

$('#someFormId').on('validate.bs.validator', function(){ 
    doSomeStuff(); 
}); 

Редактировать

Проблема с событиями в том, что она уволена после каждого поля. Из того, что я знаю, этот плагин не предоставляет событие для успешной проверки.

Answer 2

Для вашего ref надеюсь, что это поможет у

$(document).ready(function() { 

$('#contact-form').validate({ 
    rules: { 
     name: { 
      minlength: 2, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     message: { 
      minlength: 2, 
      required: true 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.control-group').removeClass('success').addClass('error'); 
    }, 
    success: function (element) { 
     element.text('OK!').addClass('valid') 
      .closest('.control-group').removeClass('error').addClass('Done'); 
    } 
}); 

}); 

Answer 3

Я наткнулся на этот вопрос, глядя на что-то еще, но я работал на точно, что вы пытаетесь достичь.

Мое решение было использовать фрагмент кода плагина автор дает для связывания с кнопки отправки

$('#form').validator().on('submit', function (e) { 
    if (!e.isDefaultPrevented()) { 
    // put your conditional handling here. return true if you want to submit 
    // return false if you do not want the form to submit 
    } 
}); 

Надежда, что помогает кому-то из.

Answer 4

$(function() { 
    $("#myForm").validator(); 

    $("#myButton").click(function (e) { 
     var validator = $("#myForm").data("bs.validator"); 
     validator.validate(); 

     if (!validator.hasErrors()) 
     { 
       $("myForm").submit(); 
     } else 
     { 
       ... 
     } 
    } 
}) 

Надежда с поможет.

Answer 5

Я так много работаю для лучшего кодирования с помощью этого модуля проверки правильности формы js.

Следуйте мой код и попробовать себя:

// Select every button with type submit under a form with data-toggle validator 
$('form[data-toggle="validator"] button[type="submit"]').click(function(e) { 
    // Select the form that has this button 
    var form = $(this).closest('form'); 
    // Verify if the form is validated 
    if (!form.data("bs.validator").validate().hasErrors()) { 
     e.preventDefault(); 
     // Here go the trick! Fire a custom event to the form 
     form.trigger('submitted'); 
    } else { 
     console.log('Form still not valid'); 
    } 
}); 

// And in your separated script, do the following: 
$('#contactForm').on('submitted', function() { 
    // do anything here... 
}) 

Рассмотрим следующий HTML-код:

<form id="contactForm" action="/contact/send" method="POST" data-toggle="validator" role="form"> 
    <div class="form-group has-feedback"> 
     <label for="inputName" class="control-label">Name:</label> 
     <input type="text" name="inputName" id="inputName" class="form-control" data-error="Your input has an invalid value"/> 
     <span class="help-block with-errors"></span> 
    </div> 
    <div class="form-group"> 
     <button type="submit" class="btn btn-success">Send</button> 
    </div> 
</form>