BootstrapValidator dosen't work with xpages? - xpages

Question

i'm a beginner in bootstrap,i was trying to build an Xpage with the BootstrapValidator to validate an inputText but it dosen't work,below the code source,can we help me to find a solution!
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/bootstrapValidator/css/bootstrap.css"></xp:styleSheet>
<xp:styleSheet href="/bootstrapValidator/css/bootstrapValidator.css"></xp:styleSheet>
<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
<xp:script src="/bootstrapValidator/js/bootstrap.min.js" clientSide="true"> </xp:script>
<xp:script src="/bootstrapValidator/js/bootstrapValidator.js" clientSide="true"></xp:script>
</xp:this.resources>
<div class="col-md-5">
<xp:inputText id="username" title=" username"></xp:inputText>
</div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(
function() {
$("#{id:username}" ).bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
} } });
]]></xp:this.value>
</xp:scriptBlock>
</xp:view>

Answer 1

Use the XPages compatible jQuery selector x$ instead of the native jQuery $ selector.
Also try using XSP.addOnLoad() instead of (document).ready().
Furthermore, your XPages xp:inputText field called "username" has an id in the browser called something like "view:_id1:_id2:_id8:username". So it's not called "username" as stated in your fields definition for bootstrapValidator. Therefore bootstrapValidator is unable to find the field. Try adding this to your scriptBlock instead of "username: {":
#{id:username}: {