XPages：引导验证器

Question

我正在尝试使用引导验证器 (http://bootstrapvalidator.com/examples/mask/) 构建 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 字段

感谢您的帮助

Answer 1

jQuery Mask 插件使用与 XPage 冲突的 AMD 加载器。因此，您的 jQuery Mask 插件根本不会加载。

解决方法是从 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 来加载插件。

更新：确保使用 the x$ XSnippet 以便 jQuery 选择器与 XPages 客户端 ID 中的冒号一起使用。

Answer 2

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

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

[Per's answer解决了这个次要问题] -> 但是，我发现将/jquery.mask.min.js文件添加到我的xpage资源时，它会导致页面上没有jquery执行，并且firebug控制台中没有错误。我从here 中提取了 mask.min.js 内容。甚至下面的代码也不能与资源中的掩码 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。我建议您也尝试这样的方法，以检查掩码插件是否是问题的根源。

更新： 我创建了一个有效的 jsfiddle：http://jsfiddle.net/m2325jhc/2/。我发现使用名称查找对象存在问题，但它使用 id 代替。 Per 的回答通过 mask 插件解决了我的 xpage 应用程序中 jquery 中断的问题。