【问题标题】:Can't validate input in modal bootstrap无法验证模式引导程序中的输入
【发布时间】:2015-11-20 22:06:57
【问题描述】:

嗨,我想在引导模式中验证输入
通常我使用这样的东西

<input type="text" class="form-control" id="kode" name="kode" placeholder="Kode" required />

或像这样使用jquery validating plugins

$("#formTest").validate({
    rules: {
        kode: "required"
    }
});

但他们都没有在引导模式中处理输入
我在哪里失踪?


@update

<button class="btn btn-primary form-button" id="addNew">Tambah Produk</button> //button to show modal

<form method="post" id="formTest" action="">
    Username : <input type="text" id="username" class="form-control" name="username" required>
    <button class="btn btn-primary" type="submit"></button
</form>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Modal Default</h4>
        </div>
        <div class="modal-body">

            <form method="post" id="formProduk" action="{{ URL::route('produk.post') }}">
                <div class="row form-group ">
                    <label for="kode_barang" class="control-label col-sm-3">Kode Barang<span class="required">*</span></label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="kode_barang" name="kode_barang" placeholder="Kode Barang" required />
                    </div>
                </div>

                <button type="button" class="btn btn-primary" type="submit" id="saveData">Save</button>
            </form>
        </div>
      </div>
    </div>
</div>

在我上面的代码中,我有两种形式 formTestformProduk
我在formTest 中验证没有问题,只需输入required 属性

同时在formProduk
我已经在输入id=kode_barang中使用required
但是在我点击按钮 save
之后,它只是解析而不验证到 url produk.post

【问题讨论】:

  • 您是否收到任何 JavaScript 错误?您的模式输入是在页面呈现后动态创建的吗?还是页面加载时modal中的输入字段已经存在?
  • 显示足够的代码来创建问题的工作演示。否则,您发布的一小段代码没有任何问题。
  • 你不应该使用&lt;button type="button" class="btn btn-primary" type="submit" id="saveData"&gt;Save&lt;/button&gt; 2 type 属性
  • 除了 ^^^^^ 验证在两种表单(页面和模态)上都不起作用jsfiddle.net/m11gaaok/1 只需删除 type="button" 表单模态表单之外没有其他原因
  • 如前面的 cmets 所述,您不能在同一元素上同时拥有 type="button"type="submit"。删除前者。

标签: jquery twitter-bootstrap jquery-validate bootstrap-modal


【解决方案1】:

试试这样的:

$('.modal').on('shown.bs.modal', function () {
    $("#formTest").unbind().validate({
        rules: {
            kode: "required"
        }
    });
});

【讨论】:

  • 仍然无法正常工作..我已经将此代码调整为我的真实脚本,例如更改 formID -&gt; #formProdukkode -&gt; kode_barang 但它仍然没有验证...请再次检查我的更新代码...也许我错过一些东西
  • 事件不应该是shown.bs.modal 而不是bs.modal.shown
猜你喜欢
  • 2015-03-14
  • 2017-10-19
  • 1970-01-01
  • 1970-01-01
  • 2016-09-23
  • 1970-01-01
  • 2018-02-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多