如何使用 bootstrap-validator 验证 SPPeoplePicker答案

【问题标题】：How to validate SPPeoplePicker with bootstrap-validator如何使用 bootstrap-validator 验证 SPPeoplePicker
【发布时间】：2017-06-12 00:16:11
【问题描述】：

我正在尝试使用1000hz bootstrap-validator 验证 SPPeoplePicker 控件，但它似乎不起作用。有人可以帮我验证一下吗？

这是我的代码：

HTML

<div id="myPicker" class="form-group has-feedback">
        <div class="col-xs-4">
            <label for="peoplePickerDiv" class="control-label">Username</label>
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                <div id="peoplePickerDiv"></div>
            </div>
            <span class="glyphicon form-control-feedback"></span>
            <span class="help-block with-errors"></span>
        </div>
    </div>

打字稿：

$('#peoplePickerDiv_TopSpan_HiddenInput').attr('data-user', 'user');
$('#aspnetForm').validator({

        custom: {

            user: function ($el) {

                var peoplePickerElement: SPClientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict['peoplePickerDiv_TopSpan'];
                var user: ISPClientPeoplePickerEntity[] = peoplePickerElement.GetAllUserInfo();

                if (user[0].IsResolved == true) {

                    $('myPicker').attr('has-success');
                    return "IT WORKS";

                }
                else if (user[0].IsResolved == false) {

                    $('myPicker').attr('has-danger');
                    return "Invalid User";
                }
            }
        }
    });
});

【问题讨论】：

能否添加您的错误信息？
我没有收到任何错误。至少控制台中没有一个。控件本身工作正常。问题是当我选择用户时验证器不起作用。如果控件中有已解析的用户，则您知道亮绿色，如果没有用户或无效用户，则亮红色。
大声笑我刚刚看到我在 $('myPicker') 中缺少“#”。我现在要测试它并发布更新。
所以你可能会遇到错误“undefined has no attribute named 'attr'”... No?
不，没有错误。将其更改为 $('#myPicker') 后，代码似乎仍然没有做任何事情。无论我输入什么，该字段都会亮起绿色。

标签： javascript jquery asp.net twitter-bootstrap validation

【解决方案1】：

我设法通过编写用于验证 ClientPicker 的自定义函数来实现我的目标。代码如下：

HTML：

    <div id="myPicker" class="row has-feedback">
        <div class="col-xs-4">
            <label for="peoplePickerDiv" class="control-label">Username</label>
            <div class="input-group">
                <span class="input-group-addon"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                <div id="peoplePickerDiv"></div>
            </div>
            <span id="ppFeedIcon"class="glyphicon form-control-feedback"></span>
            <span id="ppFeedMsg" class="help-block with-errors"></span>
        </div>
    </div>

打字稿：

    var peoplePickerElement: SPClientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict['peoplePickerDiv_TopSpan'];

    $('#myPicker').bind('DOMNodeInserted DOMNodeRemoved DOMSubtreeModified', function () {

         if ( peoplePickerElement.GetAllUserInfo().length == 0) {
            $('#myPicker').removeClass('has-success').addClass('has-error');
            $('#ppFeedIcon').addClass("glyphicon-remove").removeClass("glyphicon-ok");
            $('#ppFeedMsg').html('Invalid user.');
        }

       else if (peoplePickerElement.GetAllUserInfo().length > 0 ) {
            $('#myPicker').addClass('has-success').removeClass('has-error');
            $('#ppFeedIcon').addClass("glyphicon-ok").removeClass("glyphicon-remove");   
            $('#ppFeedMsg').html("");
        }
    });

【讨论】：