XPages:引导Validator

Question

我试图构建一个带有引导程序的Xpage (http://bootstrapvalidator.com/examples/mask/)来验证一个IP-Adress。

<?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掩码插件使用的是与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不被用来加载插件。

更新：确保使用x$ XSnippet，以便jQuery选择器能够使用XPages客户端in中的冒号。

Answer 2

一项建议是，将find行改为使用id：

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

Per的答案解决了这个次要问题，但是，我发现当将->文件添加到我的xpage资源中时，它不会导致页面上的jquery执行，在firebug控制台中没有任何错误。我从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>

一旦我删除了掩码资源，上面的工作就可以了。我正在使用jQuery2.1.1。我建议您也尝试这样的方法，以检查掩码插件是否是问题的根源。

更新：我创建了一个可以工作的jsfiddle：http://jsfiddle.net/m2325jhc/2/。我发现使用名称查找对象存在问题，但是它使用id来工作。佩尔的回答解决了jquery在我的xpage应用程序中破坏的问题，并使用了掩码插件。