如何使用 bootstrap-validator 验证 SPPeoplePicker

Posted 2023-05-08

【中文标题】如何使用 bootstrap-validator 验证 SPPeoplePicker

【英文标题】：How to validate SPPeoplePicker with bootstrap-validator

【发布时间】：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') 后，代码似乎仍然没有做任何事情。无论我输入什么，该字段都会亮起绿色。

【参考方案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("");
        
    );