XPages:Bootstrap Validator

Question

我试图用Bootstrap验证器(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不用于加载插件.

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