Question

我是javascript的新手，我正在尝试为我的网络表单进行一些javascript客户端验证。我有一个bootstrap模式，应该在单击一个按钮后弹出。如果必填字段==“”，我想隐藏模态，但如果他们有一些数据，我想显示模态。

这是我导入bootstrap和jquery库的方法

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我的javascript代码

function CheckRequired() {

        var crn = document.getElementById("txtCRN").value;
        var subject = document.getElementById("ddlExistingSubjects").value;
        var courseNo = document.getElementById("txtCourseNumber").value;
        var section = document.getElementById("txtSection").value;
        var creditHours = document.getElementById("txtCreditHours").value;
        var courseName = document.getElementById("txtCourseName").value;
        var startDate = document.getElementById("StartDate").value;
        var endDate = document.getElementById("EndDate").value;
        var meetingTime = document.getElementById("txtMeetingTime").value;
        var firstName = document.getElementById("txtPrimaryFirstName").value;
        var lastName = document.getElementById("txtPrimaryLastName").value;
        var email = document.getElementById("txtPrimaryEmail").value;

        if (crn == "" || subject == "" || courseNo == "" || section == "" || creditHours == "" || courseName == "" ||
            startDate == "" || endDate == "" || meetingTime == "" || firstName == "" || lastName == "" || email == "") {
            $(document).ready(function () {
                $('#addCourseModal').modal('hide')
            });
        }
        else {
            $(document).ready(function () {
                $('#addCourseModal').modal('show')
            });
        }
    }

Bootstrap模式和按钮

<button type="submit" class="btn btn-success btn-md" data-toggle="modal" data-target="#addCourseModal" id="btnAddCourse" onclick="CheckRequired();">Add Course</button>

当javascript代码中指定的所有字段都为空时，模态仍会显示，并且当它们不为空时不会显示。

这是我的代码中必填字段的样子，我也使用HTML5必需属性进行验证。

<asp:TextBox ID="txtCRN" runat="server" class="form-control" type="number" required="required"></asp:TextBox>

请帮忙。感谢。

P.S，我在C＃ASP.NET编码

Bootstrap模式不隐藏并显示它应该何时以及如何应用

0 个答案: