Form Tasarımı, başlık, içerik ve çoklu alıcı seçimi alanından oluşmaktadır.

<div class="row" id="dvMessageTemplate" style="display:none">
    <div class="col-sm-12">
        <div class="form-group row">
            <label for="txtAlicilar" class="col-lg-4 col-sm-12 col-form-label">Alıcılar</label>
            <div class="col-sm-12 col-lg-8">
                <div id="txtAlicilar"></div>
            </div>
        </div>
        <div class="form-group row">
            <label for="txtBaslik" class="col-lg-4 col-sm-12 col-form-label">Başlık</label>
            <div class="col-sm-12 col-lg-8">
                <div id="txtBaslik"></div>
            </div>
        </div>
        <div class="form-group row">
            <label for="txtIcerik" class="col-lg-4 col-sm-12 col-form-label">İçerik</label>
            <div class="col-sm-12 col-lg-8">
                <div id="txtIcerik"></div>
            </div>
        </div>
        <div class="text-center">
            <button class="btn btn-warning btn-sm" id="btnSendMessage" type="button">Gönder</button>
        </div>
    </div>
</div>

Popup ı açmak için bir buton tanımlayıp aşağıdaki yöntemle popupı, içeriğini ve validation kısmını oluşturabilirsiniz. Aşağıda button click eventı ile birlikte örnek verilmiştir.

$('#btnNewMessage').click(function () {
            var popupOptions = {
                width: ($(window).width() * 0.5),
                height: 300,
                id: "frmSendMessage",
                showTitle: true,
                title: "Yeni Mesaj Gönderme",
                dragEnabled: false,
                closeOnOutsideClick: false,
                shading: true,
                resizeEnabled: true,
                columnAutoWidth: false,
                onShown: function () {
                    $('#dvMessageTemplate').css('display', '');

                    var userData = [];
                    var jsonUsers = JSON.parse($('#hdPageModel').val()).Kullanicis;
                    for (var i = 0; i < jsonUsers.length; i++) {
                        userData.push({
                            Id: jsonUsers[i].Id,
                            DisplayText: jsonUsers[i].Ad + ' ' + jsonUsers[i].Ad + ' (' + jsonUsers[i].EMail + ')'
                        });
                    }

                    $("#txtAlicilar").dxTagBox({
                        dataSource: new DevExpress.data.ArrayStore({
                            data: userData,
                            key: "Id"
                        }),
                        elementAttr: {
                            class: "form-control"
                        },
                        displayExpr: "DisplayText",
                        valueExpr: "Id",
                        searchEnabled: true,
                    }).dxValidator({
                        validationRules: [{
                            type: "required",
                            message: "Alıcı seçimi zorunludur"
                        }]
                    });

                    $('#txtBaslik').dxTextBox({
                        elementAttr: {
                            class: "form-control"
                        }
                    }).dxValidator({
                        validationRules: [{
                            type: "required",
                            message: "Başlık zorunludur"
                        }, {
                            type: "stringLength",
                            min: 10,
                            message: "Başlık minumum 10 karakter olmalıdır"
                        }]
                    });
                    $('#txtIcerik').dxTextArea({
                        height: 100,
                        elementAttr: {
                            class: "form-control"
                        }
                    }).dxValidator({
                        validationRules: [{
                            type: "required",
                            message: "İçerik zorunludur"
                        }, {
                            type: "stringLength",
                            min: 10,
                            message: "İçerik minumum 10 karakter olmalıdır"
                        }]
                    });
                    var forceValidationBypass = true;
                    function validateAndSubmit(params) {
                        forceValidationBypass = false;
                        var result = params.validationGroup.validate();
                        if (result.isValid) {

                            var mesajData = {
                                "Baslik": $('#txtBaslik').dxTextBox('instance').option('value'),
                                "Icerik": $('#txtIcerik').dxTextArea('instance').option('value'),
                                "AliciKullaniciListesi": $("#txtAlicilar").dxTagBox('instance').option('value')
                            };

                            ShowLoading();
                            $.ajax({
                                type: "POST",
                                url: webApiUrl + "/api/SendMessage",
                                headers: {
                                    Authorization: 'Basic ' + UserHelper.GetToken()
                                },
                                data: JSON.stringify(mesajData),
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    HideLoading();
                                    if (data.Status) {
                                        ShowSuccess(data.Message);

                                        setTimeout(function () {
                                                        window.location = '@Url.Action("Index", "Message")';
                                                    }, 2000);
                                    } else {
                                        ShowError(data.Message);
                                    }
                                },
                                failure: function (errMsg) {
                                    HideLoading();
                                    ShowError(errMsg);
                                }
                            });
                        }
                        forceValidationBypass = true;
                    }

                    $("#btnSendMessage").dxButton({
                        text: "Gönder",
                        onClick: validateAndSubmit
                    });
                },
                onHidden: function () {
                    $('#dvMessageTemplate').css('display', 'none');
                    // DisposePopup(this._options.id);
                }
            };

            var popup = $("#dvMessageTemplate").dxPopup(popupOptions).dxPopup("instance");

            popup.show();
        });