【问题标题】:BootstrapValidator dosen't work with xpages?BootstrapValidator 不适用于 xpages?
【发布时间】:2017-01-25 16:23:34
【问题描述】:

我是 bootstrap 的初学者,我试图用 BootstrapValidator 构建一个 Xpage 来验证 inputText 但它不起作用,下面的代码源,我们可以帮我找到解决方案吗!

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">
   <xp:this.resources>
   <xp:styleSheet href="/bootstrapValidator/css/bootstrap.css"></xp:styleSheet>
   <xp:styleSheet href="/bootstrapValidator/css/bootstrapValidator.css"></xp:styleSheet>
   <xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
   <xp:script src="/bootstrapValidator/js/bootstrap.min.js" clientSide="true">  </xp:script>
   <xp:script src="/bootstrapValidator/js/bootstrapValidator.js" clientSide="true"></xp:script>
    </xp:this.resources>
                <div class="col-md-5">
                <xp:inputText id="username" title=" username"></xp:inputText>
</div>

<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(
function() {
        $("#{id:username}" ).bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                message: 'The username is not valid',
                validators: {
                    notEmpty: {
                        message: 'The username is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            } } });
              ]]></xp:this.value>
</xp:scriptBlock>

          </xp:view>

【问题讨论】:

  • 能否请您检查javascript控制台是否有错误?
  • 感谢 Oliver Busse 但我检查 java 脚本控制台时没有任何错误!

标签: xpages bootstrapvalidator


【解决方案1】:

使用 XPages compatible jQuery selector x$ 代替原生 jQuery $ 选择器。

也可以尝试使用XSP.addOnLoad() 而不是(document).ready()

此外,名为“username”的 XPages xp:inputText 字段在浏览器中有一个名为“view:_id1:_id2:_id8:username”的 id。因此,它不像 bootstrapValidator 的字段定义中所述的那样称为“用户名”。因此 bootstrapValidator 无法找到该字段。尝试将此添加到您的 scriptBlock 而不是 "username: {":

#{id:username}: { 

【讨论】:

  • 感谢 Per Henrik Lausten,我更改了函数,并使用了 x$ jQuery 选择器来安装 jquery 的 XPages:
  • 好的,下一个问题很可能是在 bootstrapValidator 配置中对“用户名:”的引用。您需要添加字段的正确客户端名称
  • 我正在关注本教程twitterbootstrap.org/bootstrap-form-validation我不明白客户端名称是什么意思?
  • 您的 XPages xp:inputText 字段用户名在浏览器中有一个名为“view:_id1:_id2:_id8:username”的 ID。因此,它不像 bootstrapValidator 的字段定义中所述的那样称为“用户名”。因此 bootstrapValidator 无法找到该字段
  • 我试图将用户名更改为“#{id:username}:”然后我添加了表单的名称,因为当我按照教程中的代码 js 进行操作时“twitterbootstrap.org/bootstrap- form-validation" 函数 bootstrapValidator 应用于带有 html 的表单!我用客户端的 id 修改了表单的名称,但它仍然是同样的问题,没有验证!修改后的代码源下方!
猜你喜欢
  • 2019-06-07
  • 2017-01-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多