【问题标题】:Bootstrap Validator to validate length of field correct syntax引导验证器验证字段正确语法的长度
【发布时间】:2016-10-19 14:25:05
【问题描述】:

我正在尝试使用 Bootstrap Validator 验证字符串的长度。不幸的是,JavaScript 不起作用。我在想可能是语法错误。

HTML:

    <form id="ordertracking" role="form">
        <div style="margin-bottom: 12px" class="input-group">
        <span class="input-group-addon"><strong>@</strong></span>
        <input id="login-username" type="text" class="form-control" name="email" placeholder="Email">
       <span class="input-group-addon"><i class="glyphicon glyphicon-barcode"></i></span>
            <input id="login-password" type="text" class="form-control" name="customerNum" placeholder="Customer #">       
    </form>

JS:

 $('#ordertracking').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    stringLength: {
                        min: 5,
                        max: 50,
                        message: 'The full email must be less than 50 characters'
                    }
                }
            },
            customerNum: {
                validators: {
                    stringLength: {
                        min: 4,
                        max: 6,
                        message: 'The customer number has to be 5 or 6 digits'
                    }
                }
            }
        }
    });

Codepen 链接:http://codepen.io/Delano83/pen/bwQZbB

我已经为此研究了两个小时,因此非常感谢任何建议。

【问题讨论】:

    标签: jquery twitter-bootstrap validation


    【解决方案1】:

    您尚未包含库:

    将此添加到所有其他脚本下方的 head 部分,它应该可以工作。

    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"&gt;&lt;/script&gt;

    如果你检查控制台你会看到这个错误:

    Uncaught TypeError: $(...).bootstrapValidator is not a function
    

    这让我意识到库没有正确加载。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-12-14
      • 2015-12-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-07-26
      • 1970-01-01
      相关资源
      最近更新 更多