基于必需属性的引导多重验证

Question

我在网站上找不到有关如何将所需属性链接到元素的信息。

一个简单的示例：我在页面上有6个元素： 要求输入A1 需要inputA2 buttonA

必需inputB1 要求输入B2 inputB

我希望仅当用户单击buttonA时才需要inputA1和inputA2 我希望仅当用户单击按钮B时才需要inputB1和inputB2

作为从母版页继承的网页（aspx），我在母版页上有一个属性，因此由于无法创建嵌套元素（），所以我无法在普通页中添加其他属性。

这是代码：

<div id="collapseExample1" aria-labelledby="heading1" class="panel-collapse collapse in " data-parent="#accordion1">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <div class="form-label-group">
                    <asp:TextBox ID="txtDescrizioneNuovo" runat="server" placeholder="" CssClass="form-control" type="text" required></asp:TextBox>
                    <label for="txtDescrizioneNuovo">Descrizione</label>
                </div>
            </div>
            <div class="col">
                <div class="input-group">
                    <div class="custom-file">
                        <asp:FileUpload ID="inputGroupFile01" runat="server" class="custom-file-input ref-upload-file" aria-describedby="inputGroupFileAddon01" />
                        <label class="custom-file-label ref-upload-filename" for="inputGroupFile01">Choose file</label>
                    </div>
                </div>
            </div>
            <div class="col">
                <asp:Button ID="btnSave" runat="server" class="btn btn-outline-primary float-right" Text="Save" OnClick="btnSave_Click" required />
                <asp:Button ID="btnCancel" runat="server" class="btn btn-outline-primary float-right" Text="Cancel" />
            </div>
        </div>
    </div>
</div>

---

我发现的解决方案

支持多重验证，它呈现为bootstrap required属性

这是我的工作解决方案，避免在元素上使用必需的属性。它基于asp.net上的RequiredFieldValidator本机，并且呈现为引导程序的必需，并且再次支持多重验证。

您应该在引导后在页面中包含的css文件中声明：

.garbage {
    display: none;
}

.garbage[style*='display: inline'] + input,
.garbage[style*='display: inline'] + select,
.garbage[style*='display: inline'] + textarea {
    border: 1px solid #dc3545;
    transition: border 500ms ease-out;
    box-shadow: 0 0 4px #dc3545;
}

以下是示例代码：

<div class="form-label-group w-30">
        <asp:RequiredFieldValidator runat="server" ID="requiredUsername" ErrorMessage="" ValidationGroup="login" ControlToValidate="inputUsername" CssClass="garbage"     Display="Dynamic"></asp:RequiredFieldValidator>
        <asp:TextBox ID="inputUsername" runat="server" placeholder="Username" CssClass="form-control" autofocus=""></asp:TextBox>
        <label for="inputEmail">Username</label>
    </div>


<asp:Button ID="btnLogin" runat="server" Text="Login" CssClass="btn btn-primary w-25" type="submit" OnClick="btnLogin_Click" ValidationGroup="login" />