javascript - 使用 jquery 引导表单验证

Question

我正在尝试使用 jquery 验证表单，因为我只需要在插入第二个表单后调用 Controller 方法。以前我有一个提交类型的输入，当我单击它时，结果是以下警报:

现在我将输入更改为显示模式的按钮类型，并且我想在单击按钮时显示相同的警报，我尝试了以下操作，但它不起作用:

$('#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. 您的提交按钮应出现在表单标记内

找到下面的工作 fiddle 。如果您不想将表单放入模式中，则可以将表单取出。

我已经编辑了我的 fiddle 。您可以使用 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>