Как или как правильно обрабатывать ошибки проверки на стороне клиента в веб-форме? - PullRequest
Новая
       38

Как или как правильно обрабатывать ошибки проверки на стороне клиента в веб-форме?

1 голос
/ 17 апреля 2019

В настоящее время я работаю над проектом, основанным на ASP.NET Webforms. Я применяю некоторые формы проверки на моей стороне клиента, но я обнаружил странное поведение элемента управления RequiredFieldValidator. Смотрите этот интерфейс:

enter image description here

Все поля помечены как обязательные и прикреплены RequiredFieldValidator ко всем элементам управления, кроме активного флажка. Теперь, когда я нажимаю кнопку «Подтвердить», только выпадающий список поставщиков показывает мне ошибку. Как ниже:

enter image description here

затем я выбираю значение из выпадающего списка и снова нажимаю кнопку подтверждения:

enter image description here

Теперь странно то, что после выбора значения из выпадающего списка поставщиков все элементы управления проверяются и выдают ошибку проверки. После выбора какого-либо значения из выпадающего списка поставщиков другие мои элементы управления проверяются. Если я удаляю раскрывающийся список со своей страницы, все элементы управления подтверждаются. Проблема возникает, когда я размещаю раскрывающийся список на своей странице и присоединяю к нему требуемый полевой валидатор. почему мои элементы управления не проверяются один раз, когда я нажимаю кнопку отправки. Почему другие элементы управления зависят от выбора выпадающего значения поставщика? Есть ли какая-то подсказка, что я делаю не так?

Вот мой ASPX-код: 

<div class="row">
    <asp:UpdatePanel
        runat="server">
        <ContentTemplate>
            <div class="col-md-4 ah-top-bottom-margin9px col-md-offset-2">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Catalogue Name
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtCatalogueName"
                        runat="server"
                        ClientIDMode="Static"
                        CssClass="form-control"></asp:TextBox>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvCatalogueName"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtCatalogueName"
                    ForeColor="Red"
                    ErrorMessage="Catalogue name must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
            <div class="col-md-4 ah-top-bottom-margin9px ah-dropdown-border-left-top-left-bottom-flat">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Quotation Ref
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtQuotationRef"
                        runat="server"
                        ClientIDMode="Static"
                        CssClass="form-control"></asp:TextBox>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvQuotationRef"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtQuotationRef"
                    ForeColor="Red"
                    ErrorMessage="Quotation Ref must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="row">
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="col-md-4 ah-top-bottom-margin9px col-md-offset-2">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Catalogue Effective 
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtEffectiveDate"
                        runat="server"
                        CssClass="form-control"></asp:TextBox>
                    <span class="input-group-btn">
                        <asp:LinkButton ID="btnEffectiveCalendar"
                            runat="server"
                            CssClass="btn btn-default"
                            Style="border-top-left-radius: 0; border-bottom-left-radius: 0;"
                            ClientIDMode="AutoID">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                        </asp:LinkButton>
                    </span>
                    <ajaxToolkit:CalendarExtender ID="ceEffectiveDate" CssClass="AH_Calendar" runat="server"
                        TargetControlID="txtEffectiveDate" Format="dd/MM/yyyy" PopupButtonID="btnEffectiveCalendar"></ajaxToolkit:CalendarExtender>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvEffectiveDate"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtEffectiveDate"
                    ForeColor="Red"
                    ErrorMessage="EffectiveDate must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
            <div class="col-md-4 ah-top-bottom-margin9px">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Catalogue Expiry 
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:TextBox
                        ID="txtExpiryDate"
                        runat="server"
                        CssClass="form-control"></asp:TextBox>
                    <span class="input-group-btn">
                        <asp:LinkButton ID="btnExpiryCalendar"
                            runat="server"
                            CssClass="btn btn-default"
                            Style="border-top-left-radius: 0; border-bottom-left-radius: 0;"
                            ClientIDMode="AutoID">
                                            <i class="fa fa-calendar" aria-hidden="true"></i>
                        </asp:LinkButton>
                    </span>
                    <ajaxToolkit:CalendarExtender ID="ceExpiryDate" CssClass="AH_Calendar" runat="server"
                        TargetControlID="txtExpiryDate" Format="dd/MM/yyyy" PopupButtonID="btnExpiryCalendar"></ajaxToolkit:CalendarExtender>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvExpiryDate"
                    runat="server"
                    EnableViewState="False"
                    EnableClientScript="False"
                    ControlToValidate="txtExpiryDate"
                    ForeColor="Red"
                    ErrorMessage="Expiry must be enter."
                    Display="Dynamic"
                    ValidationGroup="CatalogueDataSave">
                </asp:RequiredFieldValidator>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="row">
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="col-md-4 ah-top-bottom-margin9px ah-dropdown-border-left-top-left-bottom-flat  col-md-offset-2">
                <div class="input-group ah-equal-textbox-size">
                    <div class="input-group-addon">
                        <table style="width: 100%;">
                            <tr>
                                <td>Select Supplier
                                </td>
                                <td style="text-align: right;">
                                    <i class="fa fa-exclamation-triangle ah-fa-error" aria-hidden="true"></i>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <asp:DropDownList
                        ID="ddlSupplierList"
                        runat="server"
                        CssClass="form-control chosen-select"
                        Style="width: 280px;">
                    </asp:DropDownList>
                </div>
                <asp:RequiredFieldValidator
                    ID="rfvSupplierList"
                    runat="server"
                    EnableViewState="False"
                    ControlToValidate="ddlSupplierList"
                    ForeColor="Red"
                    ErrorMessage="Supplier must be selected."
                    ValidationGroup="CatalogueDataSave"
                    Display="Dynamic">
                </asp:RequiredFieldValidator>
            </div>
            <div class="col-md-4 ah-top-bottom-margin9px ah-dropdown-border-left-top-left-bottom-flat">
                <div class="input-group ah-equal-textbox-size">
                    <asp:UpdatePanel runat="server">
                        <ContentTemplate>
                            <div class="ah-active">
                                <span>Active</span>
                                <span>
                                    <asp:CheckBox
                                        ID="chkActive"
                                        runat="server"
                                        Checked="false" />
                                </span>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<div class="row">
    <div class="col-md-12">
        <div runat="server" class="panel panel-default">
            <div class="panel-body">
                <div class="text-center">
                    <asp:UpdatePanel
                        runat="server">
                        <ContentTemplate>
                            <asp:Button
                                ID="btnSaveItem"
                                runat="server"
                                Text="Save"
                                ValidationGroup="CatalogueDataSave"
                                CssClass="btn btn-primary"
                                OnClick="btnSaveItem_Click" />
                            <asp:Button
                                ID="btnReset"
                                runat="server"
                                Text="Reset"
                                CssClass="btn btn-default"
                                OnClick="btnReset_Click" />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
            </div>
        </div>
    </div>
</div>

1 Ответ

1 голос
/ 17 апреля 2019

Я все кроме Validator rfvSupplierList у вас есть EnableClientScript="False".Поэтому остальное выполняет только проверку сервера, в то время как последний выполняет также и на стороне клиента.Поэтому, когда вы нажимаете кнопку, он только проверяет ddlSupplierList и блокирует PostBack.

Я бы предложил удалить EnableClientScript="False" из всех валидаторов, чтобы у вас была проверка на стороне клиента и на сервере.

...