Question

我真的很喜欢this bootstrap form validator。我想对其进行更改，以便它可以验证 div 标记，而不仅仅是表单。

例如，这就是它的工作原理：

<form data-toggle="validator" role="form">
    ...
</form>

因此，您必须使用 data-toggle =“validator”创建表单标记。

我想做的是使用 data-toggle =“validator”在任何 div 标记上进行此操作，如下所示：

<div data-toggle="validator" role="form">
    ...
</div>

然而，无论我对[validator.js]做什么，验证器都不会起作用。

我认为我可以在[validator.js]中搜索“form”并将其替换为“div”，这里是实例和更改：

我改变了：

.filter('[form="' + this.$element.attr('id') + '"]')

要：

.filter('[div="' + this.$element.attr('id') + '"]')

我也改变了：

// VALIDATOR DATA-API
// ==================

$(window).on('load', function () {
  $('form[data-toggle="validator"]').each(function () {
    var $form = $(this)
    Plugin.call($form, $form.data())
  })
})

要：

$(window).on('load', function () {
  $('div[data-toggle="validator"]').each(function () {
    var $form = $(this)
    Plugin.call($form, $form.data())
  })
})

仍然与原始代码不一样。其余的代码似乎使用基.form-control类来查找表单元素。我不确定在哪里可以看。有什么想法吗？

原始代码无变化：（HTML + JavaScript）：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body> 
    <div class="container">

        <form data-toggle="validator" role="form">
            <div class="form-group">
                <label for="inputName" class="control-label">Name</label>
                <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
            </div>
            <div class="form-group">
                <label for="inputEmail" class="control-label">Email</label>
                <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
                <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </form>

    </div>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.5/validator.js"></script>
</body>
</html>

如何支持DIV验证而不是FORM？

原始代码无变化：（HTML + JavaScript）：

0 个答案: