Jquery XPages：引导验证程序

我试图构建一个带有引导验证器（）的Xpage来验证IP地址

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" id="testid">

<xp:this.resources>

    <xp:styleSheet href="/bootstrap.css"></xp:styleSheet>
    <xp:styleSheet href="/bootstrapValidator.min.css"></xp:styleSheet>

    <xp:script src="/jquery-1.11.1.js" clientSide="true"></xp:script>
    <xp:script src="/bootstrap.min.js" clientSide="true"></xp:script>
    <xp:script src="/bootstrapValidator.js" clientSide="true"></xp:script>
    <xp:script src="/jquery.mask.min.js" clientSide="true"></xp:script>

</xp:this.resources>



<xp:form id="maskForm">


    <div class="col-lg-5">

        <xp:inputText id="ipAddress" title="ipAddress">

        </xp:inputText>

    </div>


</xp:form>


<xp:scriptBlock>

    <xp:this.value><![CDATA[

var test = '#{javascript:getClientId("maskForm")}';

XSP.addOnLoad( function() {
$("#"+test)
    .bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            ipAddress: {
                validators: {
                    ip: {
                        message: 'The IP address is not valid'
                    }
                }
            }
        }
    })
    .find('[name="ipAddress"]').mask('099.099.099.099');
});

]]></xp:this.value>
</xp:scriptBlock>
</xp:view>

你能告诉我哪里是我的错/这是如何使用Xpages的吗？ 它不适用于我的inputText字段

---

感谢您的帮助

一个建议，将查找行改为使用id：

.find('*[id$="ipAddress"]').mask('099.099.099.099');

[Per的回答解决了这个次要问题]->但是，我发现在将

/jquery.mask.min.js

文件添加到我的xpage资源时，它不会导致页面上的jquery执行，firebug控制台中也不会出现错误。我从中提取了mask.min.js内容。即使下面的代码也不能与参考资料中的mask js文件一起使用：

<xp:scriptBlock id="script1">
    <xp:this.value><![CDATA[
        XSP.addOnLoad( function() {
            $("*[id$='msg']").html("JQUERY Working");
        });]]>
    </xp:this.value>
</xp:scriptBlock>
<xp:div id="msg"></xp:div>

一旦我删除了掩码资源，上面的工作就正常了。我使用的是jquery 2.1.1。我建议您也尝试类似的方法，以检查掩码插件是否是问题的根源

更新：

---

我创建了一个可以工作的JSFIDLE:。我发现使用名称查找对象时出现问题，但它使用id来工作。Per的回答解决了我的xpage应用程序中jquery中断的问题，使用了mask插件。

一个建议，将查找行改为使用id：

.find('*[id$="ipAddress"]').mask('099.099.099.099');

[Per的回答解决了这个次要问题]->但是，我发现在将

/jquery.mask.min.js

文件添加到我的xpage资源时，它不会导致页面上的jquery执行，firebug控制台中也不会出现错误。我从中提取了mask.min.js内容。即使下面的代码也不能与参考资料中的mask js文件一起使用：

<xp:scriptBlock id="script1">
    <xp:this.value><![CDATA[
        XSP.addOnLoad( function() {
            $("*[id$='msg']").html("JQUERY Working");
        });]]>
    </xp:this.value>
</xp:scriptBlock>
<xp:div id="msg"></xp:div>

一旦我删除了掩码资源，上面的工作就正常了。我使用的是jquery 2.1.1。我建议您也尝试类似的方法，以检查掩码插件是否是问题的根源

更新：

---

我创建了一个可以工作的JSFIDLE:。我发现使用名称查找对象时出现问题，但它使用id来工作。Per的回答用mask插件解决了我的xpage应用程序中jquery中断的问题。

jquery mask插件使用AMD loader，这与xpage冲突。因此，jQuery掩码插件根本不会加载

修复方法是从jquery.mask.min.js中删除使用AMD的部分。因此，打开jquery.mask.min.js并更改如下：

// jQuery Mask Plugin v1.7.7
// github.com/igorescobar/jQuery-Mask-Plugin
(function(f){"function"===typeof define&&define.amd?define(["jquery"],f) ...

为此：

// jQuery Mask Plugin v1.7.7
// github.com/igorescobar/jQuery-Mask-Plugin
(function(f){"function"===typeof define&&false?define(["jquery"],f) ...

这确保了AMD不用于加载插件

---

更新：确保使用，以便jQuery选择器使用XPages客户端ID中的冒号。

jQuery掩码插件使用AMD加载程序，这与XPages冲突。因此，jQuery掩码插件根本不会加载

修复方法是从jquery.mask.min.js中删除使用AMD的部分。因此，打开jquery.mask.min.js并更改如下：

// jQuery Mask Plugin v1.7.7
// github.com/igorescobar/jQuery-Mask-Plugin
(function(f){"function"===typeof define&&define.amd?define(["jquery"],f) ...

为此：

// jQuery Mask Plugin v1.7.7
// github.com/igorescobar/jQuery-Mask-Plugin
(function(f){"function"===typeof define&&false?define(["jquery"],f) ...

这确保了AMD不用于加载插件

---

更新：请确保使用，以便jQuery选择器使用XPages客户端ID中的冒号。

THX Brian和Per为您提供帮助，现在验证工作正常，我无法键入文本或其他内容。但是我没有收到错误消息“IP地址无效”，并且编辑框没有将其颜色更改为红色。嗯…仍然有很多错误，Brian和Per需要你的帮助，现在，验证工作开始了，我不能输入文本或其他东西。但是我没有收到错误消息“IP地址无效”，并且编辑框没有将其颜色更改为红色。嗯…仍然有smth错误THX Per和Brian需要你的帮助，现在，验证工作开始了，我无法键入文本或其他内容。但是我没有收到错误消息“IP地址无效”，并且编辑框没有将其颜色更改为红色。嗯…仍然有smth错误THX Per和Brian需要你的帮助，现在，验证工作开始了，我无法键入文本或其他内容。但是我没有收到错误消息“IP地址无效”，并且编辑框没有将其颜色更改为红色。嗯……还是有点不对劲