Question

我正在创建一个注册页面，在其中我创建了一些地址下拉列表，点击提交按钮我检查是否未选择任何这些值，但javascript为此不会触发。我的MVC代码是

    <div class="form-group">
    <label class="col-md-2 control-label">State</label>
    <div class="col-md-10">
        @*@Html.DropDownList("State_ID", null, htmlAttributes: new { @class = "form-control" })*@
        @Html.DropDownList("State_ID", null, "-- Please select a State --", htmlAttributes: new { @class = "form-control" })
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label">City</label>
    <div class="col-md-10">
        @Html.DropDownList("City_ID", null, "-- Please select a City --", htmlAttributes: new { @class = "form-control" })
    </div>
</div>

<div class="form-group">
    <label class="col-md-2 control-label">Area</label>
    <div class="col-md-10">
        @Html.DropDownList("Area_ID", null, "-- Please select area --", htmlAttributes: new { @class = "form-control" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(a => a.Address, new { @class = "col-md-2 control-label" })
    <div class="col-md-10">
        @Html.TextBoxFor(a => a.Address, new { @class = "form-control" })
    </div>
</div>

<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input id="submitButton" value="Register" type="submit" class="btn btn-default" />
    </div>
</div>

}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryhome")
}

我的javascript代码是

    $(document).ready(function () {
    $("#State_ID").change(function () {
        //alert("Hello");
        $("#City_ID").empty();
        $.ajax({
            type: 'POST',
            //url: '@Url.Action("GetCities")',
            url: "/MyAccount/GetCities",
            dataType: 'json',
            data: { id: $("#State_ID").val() },
            success: function (cities) {
                $("#City_ID").append('<option value =0>-- Please select a City --</option>');
                $.each(cities, function (i, city) {
                    $("#City_ID").append('<option value="' + city.Value + '">' + city.Text + '</option>');
                    //alert(city.Text);
                });
                //alert("Success");
            },
            error: function (ex) {
                alert("Failed" + ex);
            }
        });        
    });
    $("#submitButton").click(function (e) {
        if ($("#State_ID").val == '' || $("#State_ID").val == 0) {
            e.preventDefault();
            alert("Please select State");
        }
        else if ($("#City_ID").val = '' || $("#City_ID").val == 0) {
            e.preventDefault();
            alert("Please select City");
        }
        else if ($("#Area_ID").val == '' || $("#Area_ID").val == 0) {
            e.preventDefault();
            alert("Please select area");
        }
    })
});

有人可以帮忙吗？

编辑1： - 添加了HTML输出

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.8.3.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Lightmap</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Home/About">New Connection</a></li>
                            <li><a href="/Home/Forms">Download Forms</a></li>
                            <li><a href="/Home/Offices">Locate Nearest Offices</a></li>
                            <li><a href="/Home/Complaint">Locate Nearest Complaint Centers</a></li>
                            <li><a href="/Home/RTI">Right To Information</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account</a>
                        <ul class="dropdown-menu">
                            <li><a href="/MyAccount/Login" id="loginLink">Log in</a></li>
                            <li><a href="/MyAccount/Register" id="loginLink">Register</a></li>
                            <li><a href="/MyAccount/Information">Consumer Information</a></li>
                            <li><a href="/MyAccount/ViewBill">View Bill</a></li>
                            <li><a href="/MyAccount/BillSummary">Bill Summary</a></li>
                            <li><a href="/MyAccount/History">Consumption History</a></li>
                            <li><a href="/MyAccount/Calculate">Consumption Calculator</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Payment Options</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Payment/Centers">Locate Payment Centers</a></li>
                            <li><a href="/Payment/CalculateCharges">Calculate Charges</a></li>
                            <li><a href="/Payment/History">Payment History</a></li>
                            <li><a href="/Payment/Tariff">Tariff Charges</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Support/About">Help/FAQ</a></li>
                            <li><a href="/Support/Feedback">Feedback</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Register a complaint</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        


<h2>Register</h2>

<form action="/MyAccount/Register" class="form-horizontal" method="post" role="form"><input name="__RequestVerificationToken" type="hidden" value="9IRV0jQ_Xvvr5BgyjyPPjjjdYZadB7ZhvzOpOI_2a0gMgcyJlQNK9dC7WBjNy9ObokH0CDvWxAiVTT_CCjpcGGgn0zOrBBV6rxcSdQb8AC41" /><div class="validation-summary-valid text-danger" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>    <div class="form-group">
        <label class="col-md-2 control-label" for="Name">Name</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Aadhar">Aadhar Card Number</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-length="Enter a valid Aadhar Card Number" data-val-length-max="12" data-val-length-min="12" id="Aadhar" name="Aadhar" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Email">Email Address</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-email="The Email Address field is not a valid e-mail address." id="Email" name="Email" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Phone_Number">Phone Number</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Phone Number field is required." id="Phone_Number" name="Phone_Number" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Meter_Number">Meter Number</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Meter Number field is required." id="Meter_Number" name="Meter_Number" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="IsBoardEmployee">Is board employee?</label>
        <div class="col-md-10">
            <input class="check-box" data-val="true" data-val-required="The Is board employee? field is required." id="IsBoardEmployee" name="IsBoardEmployee" type="checkbox" value="true" /><input name="IsBoardEmployee" type="hidden" value="false" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">State</label>
        <div class="col-md-10">
            
            <select class="form-control" id="State_ID" name="State_ID"><option value="">-- Please select a State --</option>
<option value="1">Haryana</option>
<option value="2">Punjab</option>
<option value="3">Himachal Pradesh</option>
<option value="5">Kerala</option>
<option value="6">Gujrat</option>
<option value="7">Rajasthan</option>
<option value="8">Orrissa</option>
<option value="9">Tamil Nadu</option>
<option value="10">Andhra Pradesh</option>
<option value="11">Telengana</option>
<option value="12">West Bengal</option>
<option value="13">Manipur</option>
<option value="14">Aasam</option>
<option value="15">Bihar</option>
<option value="16">Jharkhand</option>
</select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">City</label>
        <div class="col-md-10">
            <select class="form-control" id="City_ID" name="City_ID"><option value="">-- Please select a City --</option>
<option value="1">Kurukshetra</option>
<option value="2">Ambala</option>
<option value="3">Panchkula</option>
<option value="4">Mohali</option>
<option value="5">Jalandhar</option>
<option value="6">Amritsar</option>
<option value="7">Patiala</option>
<option value="8">Ludhiana</option>
<option value="9">Jind</option>
</select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Area</label>
        <div class="col-md-10">
            <select class="form-control" id="Area_ID" name="Area_ID"><option value="">-- Please select area --</option>
<option value="2">Sector 18</option>
<option value="3">Sector 17</option>
<option value="4">Sector 16</option>
<option value="5">Sector 15</option>
<option value="6">Sector 14</option>
</select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Address">Address</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Address field is required." id="Address" name="Address" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input id="submitButton" value="Register" type="submit" class="btn btn-default" />
        </div>
    </div>
</form>

        <hr />
        <footer>
            <p>&copy; 2017 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-3.1.1.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/MyAccount/Register.js"></script>

Answer 1

您应该将val更改为val()。这是jQuery val()

的链接

＆＃13;

$(document).ready(function () {
    $("#State_ID").change(function () {
        $("#City_ID").empty();
        $.ajax({
            type: 'POST',
            url: "/MyAccount/GetCities",
            dataType: 'json',
            data: { id: $("#State_ID").val() },
            success: function (cities) {
                $("#City_ID").append('<option value =0>-- Please select a City --</option>');
                $.each(cities, function (i, city) {
                    $("#City_ID").append('<option value="' + city.Value + '">' + city.Text + '</option>');
                });;
            },
            error: function (ex) {
                alert("Failed" + JSON.stringify(ex));
            }
        });        
    });
    $("#submitButton").click(function (e) {
        if ($("#State_ID").val() == '' || $("#State_ID").val() == 0) {
            e.preventDefault();
            alert("Please select State");
        }
        else if ($("#City_ID").val() = '' || $("#City_ID").val() == 0) {
            e.preventDefault();
            alert("Please select City");
        }
        else if ($("#Area_ID").val() == '' || $("#Area_ID").val() == 0) {
            e.preventDefault();
            alert("Please select area");
        }
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>

    <script src="/Scripts/modernizr-2.8.3.js"></script>

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">Lightmap</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Home/About">New Connection</a></li>
                            <li><a href="/Home/Forms">Download Forms</a></li>
                            <li><a href="/Home/Offices">Locate Nearest Offices</a></li>
                            <li><a href="/Home/Complaint">Locate Nearest Complaint Centers</a></li>
                            <li><a href="/Home/RTI">Right To Information</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account</a>
                        <ul class="dropdown-menu">
                            <li><a href="/MyAccount/Login" id="loginLink">Log in</a></li>
                            <li><a href="/MyAccount/Register" id="loginLink">Register</a></li>
                            <li><a href="/MyAccount/Information">Consumer Information</a></li>
                            <li><a href="/MyAccount/ViewBill">View Bill</a></li>
                            <li><a href="/MyAccount/BillSummary">Bill Summary</a></li>
                            <li><a href="/MyAccount/History">Consumption History</a></li>
                            <li><a href="/MyAccount/Calculate">Consumption Calculator</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Payment Options</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Payment/Centers">Locate Payment Centers</a></li>
                            <li><a href="/Payment/CalculateCharges">Calculate Charges</a></li>
                            <li><a href="/Payment/History">Payment History</a></li>
                            <li><a href="/Payment/Tariff">Tariff Charges</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support</a>
                        <ul class="dropdown-menu">
                            <li><a href="/Support/About">Help/FAQ</a></li>
                            <li><a href="/Support/Feedback">Feedback</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Register a complaint</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        


<h2>Register</h2>

<form action="/MyAccount/Register" class="form-horizontal" method="post" role="form"><input name="__RequestVerificationToken" type="hidden" value="9IRV0jQ_Xvvr5BgyjyPPjjjdYZadB7ZhvzOpOI_2a0gMgcyJlQNK9dC7WBjNy9ObokH0CDvWxAiVTT_CCjpcGGgn0zOrBBV6rxcSdQb8AC41" /><div class="validation-summary-valid text-danger" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>    <div class="form-group">
        <label class="col-md-2 control-label" for="Name">Name</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Aadhar">Aadhar Card Number</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-length="Enter a valid Aadhar Card Number" data-val-length-max="12" data-val-length-min="12" id="Aadhar" name="Aadhar" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Email">Email Address</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-email="The Email Address field is not a valid e-mail address." id="Email" name="Email" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Phone_Number">Phone Number</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Phone Number field is required." id="Phone_Number" name="Phone_Number" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Meter_Number">Meter Number</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Meter Number field is required." id="Meter_Number" name="Meter_Number" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-10">
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="IsBoardEmployee">Is board employee?</label>
        <div class="col-md-10">
            <input class="check-box" data-val="true" data-val-required="The Is board employee? field is required." id="IsBoardEmployee" name="IsBoardEmployee" type="checkbox" value="true" /><input name="IsBoardEmployee" type="hidden" value="false" />
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">State</label>
        <div class="col-md-10">
            
            <select class="form-control" id="State_ID" name="State_ID"><option value="">-- Please select a State --</option>
<option value="1">Haryana</option>
<option value="2">Punjab</option>
<option value="3">Himachal Pradesh</option>
<option value="5">Kerala</option>
<option value="6">Gujrat</option>
<option value="7">Rajasthan</option>
<option value="8">Orrissa</option>
<option value="9">Tamil Nadu</option>
<option value="10">Andhra Pradesh</option>
<option value="11">Telengana</option>
<option value="12">West Bengal</option>
<option value="13">Manipur</option>
<option value="14">Aasam</option>
<option value="15">Bihar</option>
<option value="16">Jharkhand</option>
</select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">City</label>
        <div class="col-md-10">
            <select class="form-control" id="City_ID" name="City_ID"><option value="">-- Please select a City --</option>
<option value="1">Kurukshetra</option>
<option value="2">Ambala</option>
<option value="3">Panchkula</option>
<option value="4">Mohali</option>
<option value="5">Jalandhar</option>
<option value="6">Amritsar</option>
<option value="7">Patiala</option>
<option value="8">Ludhiana</option>
<option value="9">Jind</option>
</select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label">Area</label>
        <div class="col-md-10">
            <select class="form-control" id="Area_ID" name="Area_ID"><option value="">-- Please select area --</option>
<option value="2">Sector 18</option>
<option value="3">Sector 17</option>
<option value="4">Sector 16</option>
<option value="5">Sector 15</option>
<option value="6">Sector 14</option>
</select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-md-2 control-label" for="Address">Address</label>
        <div class="col-md-10">
            <input class="form-control" data-val="true" data-val-required="The Address field is required." id="Address" name="Address" type="text" value="" />
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input id="submitButton" value="Register" type="submit" class="btn btn-default" />
        </div>
    </div>
</form>

        <hr />
        <footer>
            <p>&copy; 2017 - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="/Scripts/jquery-3.1.1.js"></script>

    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    
    <script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/MyAccount/Register.js"></script>

＆＃13;

单击按钮时不会触发JavaScript

1 个答案: