XPages中的bootstrapValidator

时间:2019-01-13 17:15:54

标签: twitter-bootstrap xpages bootstrapvalidator

我在XPage中有以下代码,但是即使给定字段ipAddress也为空,它也不起作用,它也不提示任何验证,我也尝试使用#{id:ipAddress},但它不起作用。我正在使用Notes 9和Designer9。有人可以通过bootstrapValidator功能在XPages中进行现场验证的其他方法来帮助我吗。

     <?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 ="view:_id1";
        var fieldvalue="#view:_id1:_id4:_id142:_id143:callback1:idLocation";
      XSP.addOnLoad( function() {
        $("#"+test).bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
           fieldvalue: {
                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>

    <!-- end snippet -->

在此处附加图片,根据您的建议输出 image of error

imager of error erro 3

1 个答案:

答案 0 :(得分:0)

当您检查HTML源代码时,您会发现id属性已被更改。 HTML规范要求ID唯一,因此JSF修改了名称。

在脚本块中,您需要将它们存储在变量中,而不是按实际使用它们。

您已经为表格做了。对字段也是如此。

更新

您的代码可能需要看起来像这样(在CDATA中):

      XSP.addOnLoad( function() {
     // You might need one more #
        $('#{id:maskForm}').bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
           '#{id:ipAddress}': {
                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'
                    }
                }
            } } }) });

        ]]&gt;

您的代码段中唯一的字段是 ]]&gt; -这就是我的示例所使用的字段。 这里的窍门是:用提供实际ID的XPages表达式语言替换静态ID。您的脚本块在将数据发送到浏览器之前先处理表达式。浏览器在不知道数据被预处理的情况下获取数据。

因此,如果您有ipAddress,则可以使用<input id="Color" />来获取实际ID。

但是,您可能会重新考虑您的方法。 XPages具有很好的验证器,这些验证器与字段存储在一起,并提供您所需要的大多数内容。外部化验证,当字段更改时,您经常需要更改代码。将字段和验证放在一起!