Bootstrap проверка формы с использованием jquery

Question

Я пытаюсь проверить форму, используя jquery, потому что мне нужно вызывать метод контроллера только после вставки второй формы. Ранее у меня был ввод типа submit, и когда я щелкнул по нему, результатом было следующее предупреждение:

Теперь я изменил ввод на тип кнопки, который отображает модальное значение, и я хочу чтобы показать то же самое предупреждение, когда я нажимаю кнопку, я попробовал следующее, но оно не работает:

$('#formContratto').validate({
            rules: {
                NumeroAutobus: {
                    required: true
                },
                Descrizione: {
                    required: true
                },
                DocContratto: {
                    required: true
                },
                NumeroAutorizzazione: {
                    required: true
                },
                DataScadenza: {
                    required: true
                },
                idAbbonamento: {
                    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');
            }   
        });

Это кнопка ввода:

<div class="col-sm-2"><input type="button" value="@Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" onclick="submitform();" /></div>

И это скрипт страница:

    <script>
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();

            $('#formContratto').validate({
                rules: {
                    NumeroAutobus: {
                        required: true
                    },
                    Descrizione: {
                        required: true
                    },
                    DocContratto: {
                        required: true
                    },
                    NumeroAutorizzazione: {
                        required: true
                    },
                    DataScadenza: {
                        required: true
                    },
                    idAbbonamento: {
                        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');
                }   
            });
        });

        $('#modalLoginForm').on('show.bs.modal', function (e) {
            var button = e.relatedTarget;
            if ($("#NumeroAutobus").val().length == 0
                || $("#Descrizione").val().length == 0
                || $("#DocContratto").val().length == 0
                || $("#NumeroAutorizzazione").val().length == 0
                || $("#DataScadenza").val().length == 0
                || $("#idAbbonamento").val().length == 0) {
                e.stopPropegation();
            }
        });

        function submitform() {
            debugger;
            var f = document.getElementsByTagName('form')[0];
            if (f.checkValidity()) {
                f.submit();
            }
        }
    </script>

Есть идеи?

Большое спасибо.

Answer 1

Для этого:

1. Для вашей кнопки должно быть установлено значение type = "submit"
2. Ваша кнопка отправки должна присутствовать внутри тега формы

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

Я отредактировал свою скрипку. Вы можете использовать метод submitHandler, чтобы предотвратить действие формы по умолчанию, используя e.preventDefault(); и обрабатывать ваши следующие действия.

$(function() {

  $("#formContratto").validate({
    rules: {
      NumeroAutobus: {
        required: true
      },
      Descrizione: {
        required: true
      }
    },
    messages: {
      NumeroAutobus: {
        required: "Please enter some data"
      },
      Descrizione: {
        required: "Please provide some data"
      }
    },
    submitHandler: function(form,e) {
            e.preventDefault();
            alert('Form submitted');
            return false;
        }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Add Stuff</h4>
      </div>
      <div class="modal-body">
        <form role="form" id="formContratto">
          <div class="form-group">
            <label class="control-label col-md-3" for="email">First Field:</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="NumeroAutobus" name="NumeroAutobus" placeholder="Enter first field" require/>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-md-3" for="email">Second Field:</label>
            <div class="col-md-9">
              <input type="text" class="form-control" id="Descrizione" name="Descrizione" placeholder="Enter second field" require>
            </div>
          </div>
          <div class="modal-footer">
            <button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
            <button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 2

Я решил это.

В методе, где я отображаю модальный режим, я добавил оператор else следующим образом:

 $('#modalLoginForm').on('show.bs.modal', function (e) {
    var button = e.relatedTarget;
    if ($("#NumeroAutobus").val().length == 0
        || $("#Descrizione").val().length == 0
        || $("#DocContratto").val().length == 0
        || $("#NumeroAutorizzazione").val().length == 0
        || $("#DataScadenza").val().length == 0
        || $("#idAbbonamento").val().length == 0) {
        e.stopPropegation();
    }
    else {
        event.preventDefault();
    }
});

С помощью protectDefault я избегал вызова на сервер и открывал модально правильно. Надеюсь, это кому-нибудь поможет.