XPages: Bootstrap Validator

Question

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>

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

Thanks for your help

Answer 1

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

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) ...

to this:

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

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

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

Answer 2

One suggestion, change the find line to use the id instead:

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

[Per's answer solves this secondary issue] -> However, I found that when adding the /jquery.mask.min.js file to my xpage resources, it causes no jquery on the page to execute, with no errors in the firebug console. I pulled the mask.min.js content from here. Not even the below code would work with the mask js file in the resources:

<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>

As soon as I removed the mask resource, the above works fine. I am using jquery 2.1.1. I would recommend you try something like this too, to check if the mask plugin is the root of the problem.

UPDATE: I created a jsfiddle that works: http://jsfiddle.net/m2325jhc/2/. I found that there were issues using the name to find the object, but it works using the id instead. Per's answer solved the issue of jquery breaking in my xpage app, with the mask plugin.