Question

我尝试使用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";
                }
            }
        }
    });
});

Answer 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("");
        }
    });

如何使用bootstrap-validator验证SPPeoplePicker

1 个答案: