Question

我正在使用Laravel 5.2和Bootstrap来创建模态对话框。我正在尝试验证DirectoryIndex字段，但它不会向其添加content类。

这是我的代码：

error

$(document).ready(function() {
  $('.save-link').on('click', function() {
    $('#linkModal').modal({
      backdrop: 'static',
      keyboard: false
    })
  });
  $('#save_form').on('keyup', function() {
    $("#save_form").validate({
      rules: {
        content: "required"
      },
      messages: {
        content: "required"
      }
    });
  });
});

更新：我是这样做的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
{{Form::open(['method' => 'POST', 'id' => 'save_form'])}}
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="modal" id="linkModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">
          Add link
        </h4>
      </div>
      <div class="modal-body">

        <div class="content-wrapper2">
          {{Form::text('content', null, ['class' => 'required content-wrapper col-md-11 form-control', 'id' => 'content'])}}
        </div>
      </div>
      <div class="modal-footer">
        {{Form::button('Save', ['class' => 'btn btn-primary', 'id' => 'save'])}}
      </div>
    </div>

  </div>
</div>
{{Form::close()}}

$(document).ready(function() {


    $('.save-link').on('click', function() {
        $('#linkModal').modal({
            backdrop: 'static',
            keyboard: false
        })
    });

    $('#save').on('click', function() {
        customValidate();

    });
    $('#linkModal').on('keyup', function() {
        customValidate();

    });
});

并且它正在工作，我不知道它为什么不能使用jquery验证。

Answer 1

我选择在这里使用parsley jQuery验证库。似乎运行良好，只需要一些错误输出的样式。您可以在parsleyjs.org找到相关文档。它是当时我能找到的最优雅的。

请see this fiddle。

我放弃了使用laravel集体表格助手。我认为在一定的利基情况下它很好，但大部分是过度工程和阅读困惑。

javascript很简单：

$(document).ready(function () {
  $("#save-link-form").parsley();
  $("#save-link-form").submit(function (e) {
    e.preventDefault();
    console.log("submitted successfully");
  });
});

您需要删除e.preventDefault()和日志，并根据您希望提交表单进行修改，无论是通过AJAX还是（如果不是） - 完全删除submit事件回调。

可以使用parsley语法将parsley的选项放入表单元素本身，但它也可以很好地覆盖默认的HTML 5验证，因此您可以使用required和type="url"等属性而不使用蹩脚的HTML 5验证优先，但保持直观的HTML 5语法。

Answer 2

您可以覆盖jquery validate以使用bootstrap has-error类

 $(document).ready(function() {

    $.validator.setDefaults({ 
        highlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).closest('.form-group').removeClass('has-error');
        } 
    });

  $('.save-link').on('click', function() {
    $('#linkModal').modal({
      backdrop: 'static',
      keyboard: false
    })
  });
  $('#save_form').on('keyup', function() {
    $("#save_form").validate({
      rules: {
        content: "required"
      },
      messages: {
        content: "required"
      }
    });
  });
});

在Bootstrap模式中验证字段

2 个答案: