Сочетание модальных всплывающих окон и проверки формы HTML5

Question

У меня есть форма, которая обрабатывает ее в модальном всплывающем окне. Я бы хотел, чтобы при нажатии кнопки формы было нажато следующее:

• Если поле формы не проходит проверку, отобразите сбой проверки, используя собственный экран браузера.
• Если форма проходит проверку, процесс модальное всплывающее окно

Однако я не могу получить эту работу в IE10. Суть проблемы заключается в том:

• Если я использую кнопки <button type="button", как это было предложено загрузчиком модальных всплывающих учебники, то ни один браузер не делает его нативной формы проверки
• Если я использую кнопки <button type="submit", то все браузеры показать правильную проверку формы, однако, если проверка прошла, IE10 продолжает перезагружать страницу (потому что она представляет форму), прерывая модальное всплывающее окно. Chrome не отправляет форму и правильно показывает модальное всплывающее окно.

Мой вопрос: как мне получить желаемое поведение в IE10?

---

Мой код основан на this tutorial, раздел меняющегося модальное содержания основано на гашетке. Вот форма:

<p><form role="form" class="form-inline"> 
    <div class="form-group"> 
     <label class="control-label" for="input_opt_name">Name:</label> 
     <input type="text" class="form-control" required id="input_opt_name" placeholder="Name Here" data-toggle="tooltip" title="Enter the name:"> 
    </div> 
    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modal_window" data-req="blabla">Set Name</button> 
</form></p> 

Этот код успешно запускает всплывающее окно проверки; однако в случае сбоя проверки модальное всплывающее окно отображается в любом случае. Я добавил следующий код для подавления:

$('#modal_window').on('show.bs.modal', function(e) 
{ 
    var button = $(e.relatedTarget); 

    if (button[0].type == "submit") 
    { 
     var tf = button.closest('form'); 
     if (tf != undefined) 
     { 
      if (!tf[0].checkValidity()) 
       e.preventDefault(); 
     } 
    } 
} 

Answer 1

Я не понимаю, почему Chrome подавляет подачу формы, но IE10 этого не делает. Однако я нашел обходное решение (вдохновленное this question).

Добавление следующей JQuery:

$('form').bind("submit", function() { return false; }); 

Это приводит к тому, представлению формы, чтобы подавить, не нарушая модальное всплывающее окно. Это исправляет IE10 и не влияет на Chrome.