没有出现ASP.NET .addClass错误框

时间:2018-11-14 02:23:44

标签: javascript jquery asp.net forms

我有一个页面,允许用户选择所需的时间表来运行任务。

enter image description here

用户可以选择多个时间表。 例如每日+每周

条件: 如果选中Weekly复选框,则Select Day of Week必须至少选择1天。

var divDay = document.getElementById("divSelectDay");
var execSch = document.getElementById("ddlExecutionSchedule");

var checkbox = execSch.getElementsByTagName("input");
var counter = 0;
for (var i = 0; i < checkbox.length; i++) {
    if (checkbox[i].checked) {
        if (checkbox[i].value == "Weekly")
            divDay.style.display = 'block';
    }
    else {
        if (checkbox[i].value == "Weekly") {
            divDay.style.display = 'none';
        }
    }
}

function ShowCheckBox(ddlId) {
    var ControlName = document.getElementById(ddlId.id);
    var day = document.getElementById("divSelectDay");

    if (ControlName.value == "Weekly") 
    {
        day.style.display = 'block';
        dat.style.display = 'none';
    }
    else {
        day.style.display = 'none';
        dat.style.display = 'none';
    }
}

//  Toggles Weekly (Day) execution schedule.
function ToggleExecutionSchedule(controlId) {
    var frmControl = document.getElementById(controlId.id);
    var divDay = document.getElementById("divSelectDay");

    var checkbox = frmControl.getElementsByTagName("input");
    var counter = 0;
    for (var i = 0; i < checkbox.length; i++) {
        if (checkbox[i].checked)
        {
            if (checkbox[i].value == "Weekly")
                divDay.style.display = 'block';
        }
        else
        {
            if (checkbox[i].value == "Weekly") {
                divDay.style.display = 'none';
            }
        }
    }
}

在同一 .ascx 页面上,我有一个SAVE按钮,用于验证页面输入:

function SaveGroupCheck() {
    var isValid = true;
    var haveError = false;

    var schedule = document.getElementById("<%=ddlExecutionSchedule.ClientID%>").value;
    if (schedule == "Weekly")
    {
        var xday = document.getElementById("<%=chkSelectDay.ClientID%>");
        var checkbox = xday.getElementsByTagName("input");
        var counter = 0;
        for (var i = 0; i < checkbox.length; i++) {
            if (checkbox[i].checked) {
                counter++;
            }
        }

        if (counter < 1) {
            $("#chkSelectDay").addClass('errorbox');
            $("#divSelectDay").addClass('has-error has-feedback');
            $("#lblSelectDay").addClass('has-error has-feedback');
        haveError = true;
        }
        else {
            $("#chkSelectDay").removeClass('errorbox');
            $("#divSelectDay").removeClass('has-error has-feedback');
            $("#lblSelectDay").removeClass('has-error has-feedback');
        }
    }

    if (!isValid || !haveError) {
        document.getElementById("<%=txtCheckPostback.ClientID%>").value = "Save";
        waitingDialog.show('Saving Changes...');
        __doPostBack();

    }
    else {
        waitingDialog.hide();
        showErrorPopup("Please enter required information for all highlighted fields");
    }

现在,我的SAVE按钮允许用户在未选择Weekly的情况下勾选Select Day of Week时保存设置。

我可以知道我想念什么吗?谢谢您的宝贵时间。


HTML:

<div class="form-group" id="divExecutionSchedule">
    <label class="control-label col-md-2" id="lblExecutionSchedule">Execution Schedule</label>
    <div class="col-md-3">
        <div class="input-group">
            <asp:CheckboxList ID="ddlExecutionSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleExecutionSchedule(this)" >
                <asp:ListItem Text="Daily" Value="Daily"></asp:ListItem>
                <asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
            </asp:CheckboxList>
        </div>
    </div>
    <label class="control-label col-md-2"></label>
    <div class="col-md-10">
        <div class="alert alert-danger hidden" role="alert" id="executionScheduleError"></div>
    </div>
</div>

<div class="form-group" id="divSelectDay" >
    <label class="control-label col-md-2" id="lblSelectDay">Select Day of Week</label>
    <div class="col-md-3">
        <div class="input-group">
            <asp:CheckBoxList ID="chkSelectDay" CssClass="chkLabel" ClientIDMode="Static" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table"> 
                <asp:ListItem Value="Monday">Mon</asp:ListItem>
                <asp:ListItem Value="Tuesday">Tue</asp:ListItem>
                <asp:ListItem Value="Wednesday">Wed</asp:ListItem>
                <asp:ListItem Value="Thursday">Thu</asp:ListItem>
                <asp:ListItem Value="Friday">Fri</asp:ListItem>
                <asp:ListItem Value="Saturday">Sat</asp:ListItem>
                <asp:ListItem Value="Sunday">Sun</asp:ListItem>
            </asp:CheckBoxList>
        </div>
    </div>
    <label class="control-label col-md-2"></label>
    <div class="col-md-10">
        <div class="alert alert-danger hidden" role="alert" id="selectDayError"></div>
    </div>
</div>

<div class="text-right">
    <button id="btnSave" class="btn btn-success btn-md" onclick="return preSave();"><span class="fa fa-floppy-o" aria-hidden="true"></span>Save</button>
</div>

0 个答案:

没有答案