Как отображать предупреждение после того, как событие произошло в Bootstrap?

Я хочу отобразить предупреждение после нажатия кнопки отправки и все было успешно выполнено. Я используюКак отображать предупреждение после того, как событие произошло в Bootstrap?

jqBootstrapValidation.js

библиотеку, чтобы проверить, что форма не отправляется без значений. Это код, который я прямо сейчас:

<!DOCTYPE html> 
<br/> 
<html lang="en"> 
<head> 
    <title>Title</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 

</head> 
<body> 
<form class="form-horizontal"> 
    <div class="control-group"> 
     <label class="control-label">Email address</label> 
     <div class="controls"> 
      <input type="email" required /> 
      <p class="help-block"></p> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label">Type something</label> 
     <div class="controls"> 
      <input type="text" name="some_field" required /> 
      <p class="help-block"></p> 
     </div> 
    </div> 
    <input type="submit" value="submit"/> 
</form> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!-- or use local jquery --> 
<script src="/js/jqBootstrapValidation.js"></script> 
<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 
<script> 

    $(function() { 
     $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); 
    }); 

</script> 

<div class="container"> 
    <h2>Alerts</h2> 
    <p>Form Successful</p> 
    <div class="alert alert-success fade in"> 
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
     <strong>Success!</strong> You have filled in the form correctly! 
    </div> 
</div> 

</body> 
</html>

Я хочу, чтобы это появится в верхнем левом углу, а затем перенаправляет меня на другую страницу через 2 секунды или так (на данный момент на той же странице) после того, как проверка была успешной. Это возможно?

<div class="container"> 
    <h2>Alerts</h2> 
    <p>Form Successful</p> 
    <div class="alert alert-success fade in"> 
     <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
     <strong>Success!</strong> You have filled in the form correctly! 
    </div> 
</div>

источник

2015-11-08 learningbyexample

Я не уверен, но Я считаю, что функция проверки должна возвращать av ALUE. Вы можете проверить это? – Rajesh

Читать documentation есть submitSuccess обратного вызова, которая вызывается, когда форма успешно проверена и представлена.

Вы можете изменить ваше предупреждение container к верхней левой руке, добавив некоторый стиль и скрыть его по умолчанию или лучше использовать бутстраповские модальности :) Попробуйте

<div class="container alert-wrapper"> 
     .... // add alert dialog here 
    </div> 

.alert-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index:999; 
    background: #fff; 
    display: none; 
    height: 100%; 
    width: 100%; 
    overflow:hidden; 
} 

    $(function() { 
     $("input,select,textarea").not("[type=submit]").jqBootstrapValidation({ 
      preventSubmit: true, 
      submitError: function ($form, event, errors) { 
       // Here handle errors 
      }, 
      submitSuccess: function ($form, event) { 

       // Show your Success Message 
       $(".alert-wrapper").fadeIn(); 

       // redirect after two seconds to other page 
       window.setTimeout(function() { 
        window.location.href = "https://www.example.com"; 
       }, 2000); 

       event.preventDefault(); 
      } 
     }); 
    });

источник

2015-11-08 16:59:37

Существует submitSuccess: функция ($ формы, события) срабатывают, когда форма утверждена successfully..you может использоваться предупреждением внутри этой функции .. в коде ниже я использовал DIV для отображения предупреждающего сообщения ..

$("input,textarea").jqBootstrapValidation(
    { 

     preventSubmit: true, 
     submitError: function ($form, event, errors) { 
      // something to have when submit produces an error ? 
      // Not decided if I need it yet 
     }, 
     submitSuccess: function ($form, event) { 
      debugger; 
      event.preventDefault(); 

$('#divid').append('<h2>Alerts</h2> <p>Form Successful</p> <div class="alert alert-success fadein"> 
    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> 
    <strong>Success!</strong> You have filled in the form correctly! 
</div> '); 


});

источник

2016-03-10 11:27:33

Как отображать предупреждение после того, как событие произошло в Bootstrap?

ответ

Смежные вопросы