XPages:Bootstrap验证器 [英] XPages: Bootstrap Validator

问题描述

我正在尝试使用Bootstrap验证程序( http://bootstrapvalidator.com/examples/mask建立一个Xpage /)验证IP地址

i was trying to build a Xpage with a Bootstrap Validator (http://bootstrapvalidator.com/examples/mask/) to validate an 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字段

Can you tell me where´s my fault / how this works with Xpages? It didn´t work with my inputText Field

感谢您的帮助

推荐答案

jQuery Mask插件使用与XPages冲突的AMD加载器.因此，您的jQuery Mask插件根本无法加载.

The jQuery Mask plugin uses AMD loader which conflicts with XPages. Therefore your jQuery Mask plugin does not load at all.

解决方法是从jquery.mask.min.js中删除使用AMD的部分.因此，打开jquery.mask.min.js并对此进行更改:

The fix is to remove from jquery.mask.min.js the part where AMD is used. So open jquery.mask.min.js and change from this:

// 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加载插件.

This ensures that AMD is not used to load the plugin.

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

Update: Make sure to use the x$ XSnippet in order for jQuery selectors to work with the colons in the XPages client side ids.

这篇关于XPages:Bootstrap验证器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！