Question

这是我的观点：

@using (Html.BeginForm("SaveNewCustomer", "Dealer", FormMethod.Post, new { id = "myForm" }))
{
    <div class="form-horizontal">
                        <div class="row">

                            <div class="form-group-1">
                                @Html.LabelFor(model => model.device.MotorType, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.MotorType, new { htmlAttributes = new { @class = "form-control required", placeholder = "Motor Type", required = "required" } })
                            </div>
                            <div class="form-group-1">
                                @Html.LabelFor(model => model.device.PowerRating, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.PowerRating, new { htmlAttributes = new { @class = "form-control required", placeholder = "Power Rating", required = "required" } })
                            </div>
                            <div class="form-group-1">
                                @Html.LabelFor(model => model.device.InstallationDate, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.InstallationDate, new { htmlAttributes = new { @class = "form-control datepicker required", placeholder = "Installation Date(MM/dd/yyyy)", required = "required" } })
                            </div>
                            <div class="form-group-1">
                                @Html.LabelFor(model => model.device.ActivationDate, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.ActivationDate, new { htmlAttributes = new { @class = "form-control datepicker required", placeholder = "Activation Date(MM/dd/yyyy)", required = "required" } })
                            </div>
                            <div class="form-group-1">
                                @Html.LabelFor(model => model.device.DataReceiveInterval, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.DataReceiveInterval, new { htmlAttributes = new { @class = "form-control required", placeholder = "Data receive Interval", required = "required" } })
                            </div>
                            <div class="form-group-1">
                                @Html.LabelFor(model => model.device.HasAMC, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.HasAMC, new { htmlAttributes = new { @class = "form-control required", @onchange = "OnChange();" } })
                            </div>
                            <div class="form-group-1" id="HasDate">
                                @Html.LabelFor(model => model.device.AMCExpiredDate, htmlAttributes: new { @class = "control-label col-lg-4" })
                                @Html.EditorFor(model => model.device.AMCExpiredDate, new { htmlAttributes = new { @class = "form-control required", placeholder = "AMCExpireDate(MM/dd/yyyy)", required = "required", title = "Enter AMC Expire Date" } })
                            </div>
                            <button style="margin-left:33%;" id="action" class="btn btn-sm btn-primary col-lg-2 " type="button" name="action" value="SaveDeviceInfo"><strong>Save</strong></button>

                        </div>
                    </div>
}

我的javascript脚本是

 <script type="text/javascript">
        $(document).ready(function () {
            jQuery.validator.setDefaults({
                debug: true,
                success: "valid"
            });
            $( "#myForm" ).validate({
                rules: {
                    "client.ContactNo": {
                        required: true
                    }
                }
            });

            $("#action").click(function () {               
                if (!$("#myForm").validate()) { // Not Valid
                    return false;
                } else {
                    Save();
                }
            });
   function Save() {

            var frm = $("#myForm").serialize();
            $.ajax({
                url: "/Dealer/SaveNewCustomer",
                data: frm,
                type: "POST",
                success: function (result) {
                    if (result == "true") {
                        //alert(result);
                        window.location.href = "/Dealer/Customers?Success=true&Message=Customer updated successfully.";
                    }
                    else
                        toastr.error(result);
                }
            });
        }
 </script>

问题是验证不是火。在If else条件下，它显示false并直接将值存储在数据库中。请你帮助我好吗？我的代码有什么问题吗？请给我一些建议。提前谢谢。

Answer 1

.validate()只是初始化方法。
.valid() is the method used for testing the form。
```
if (!$("#myForm").valid()) { ....
```

这是一个没有实际意义的因素，因为your .ajax() function belongs inside the submitHandler option of the plugin无论如何。 submitHandler回调仅在表单有效时触发，因此您可以完全消除整个if / then click处理函数（但是您必须将button元素更改为{{1} }）。

type="submit"

注意：如果您正在使用ASP框架中包含的$(document).ready(function () { jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#myForm" ).validate({ rules: { "client.ContactNo": { required: true } }, submitHandler: function(form) { // only fires when form is valid var frm = $(form).serialize(); $.ajax({ url: "/Dealer/SaveNewCustomer", data: frm, type: "POST", success: function (result) { if (result == "true") { //alert(result); window.location.href = "/Dealer/Customers?Success=true&Message=Customer updated successfully."; } else toastr.error(result); } }); return false; } }); });插件，则会自动构建并调用unobtrusive-validation方法。如果是这种情况，那么您对.validate()的调用将被忽略，并且您只会在.validate()内添加任何插件选项。

Answer 2

您错过了html中的表单标记。另外，你没有任何关于myform id的东西。所以你试图在你的jquery中验证#myform但是没有myform。您需要添加表单标记并为其指定myform。

在jquery中为bootstrap弹出窗口进行验证

2 个答案: