2015-10-05 4 views
0

У меня есть форма MVC 5, которая отправляется через jquery и отправляет форму методу HTTPPost на контроллере. Все работает отлично, но мне нужно, чтобы проверить форму. Сейчас он покажет сводку проверки на странице с элементами управления, но наложение экрана будет включено, но не отобразит всплывающее окно. Поэтому я думаю, что он работает на полпути. Я просто не хочу, чтобы он перекрывал экран, и я не хочу, чтобы всплывающее окно отображалось, если форма недействительна. Как я могу это достичь?Отключить Модальное всплывающее окно, если форма не действительна

Форма cshtml

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "ballotForm" })) 
{ 
    @Html.AntiForgeryToken() 

    @Html.EditorFor(m => m.BallotViewModel, new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "BallotViewModel" } }) 

    <table class="col-sm-12"> 
     <tr> 
      <td> 

       <button type="submit" class="btn btn-default btn-md btn-submit" data-target="#modal-container" data-toggle="modal"> 
        <span class="glyphicon glyphicon-send" aria-hidden="true"></span> Submit 
       </button> 

      </td> 
     </tr> 
    </table> 
} 

JQuery

$(function() { 
    $('#ballotForm').on('submit', function (e) { 
     var isValid = $('#ballotForm').valid(); 
     console.log(isValid); 
     if (isValid) 
     { 

     e.preventDefault(); 

     var data = $(this).serialize(); 
     var url = $(this).attr('target'); 

     $.post(url, data) 
      .done(function (response, status, jqxhr) { 

       $('#modal-container').on('show.bs.modal', function (event) { 
        var modal = $(this); 
        console.log(modal); 
        modal.find('.modal-content').html(response); 
        console.log(response); 
       }); 
       $('#modal-container').modal('show'); 

      }) 
      .fail(function (jqxhr, status, error) { }); 
     } 

    }); 
}); 
+0

Я использовал следующую библиотеку, чтобы выполнить проверку с помощью бутстрапа. https://github.com/johnnyreilly/jQuery.Validation.Unobtrusive.Native – Marko

+0

, что не сработало для меня – JMO

ответ

1

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

$(function() { 
    $("#btnBallotFormSubmit").click(function() { 
     var ValidStatus = $("#ballotForm").valid(); 
     console.log(ValidStatus); 
    if (ValidStatus == false) { 
     return false; 
    } 
}); 
}); 
Смежные вопросы