在 jquery 中验证 bootstrap 弹出窗口

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

您缺少 html 中的表单标签。另外，您没有任何带有 myform id 的东西。因此，您尝试在 jquery 中验证 #myform 但没有 myform。您需要添加您的表单标签并为其指定一个 id myform。

Answer 2

.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 元素更改为 type="submit").

$(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;
        }
    });
});

注意：如果您碰巧使用 ASP 框架中包含的 unobtrusive-validation 插件，那么 .validate() 方法是自动构造和调用。如果是这种情况，那么您对 .validate() 的调用将被忽略，并且您将仅在 jQuery.validator.setDefaults().

内放置任何插件选项

在 jquery 中验证 bootstrap 弹出窗口

Validation in jquery for bootstrap popup

javascript

asp.net-mvc

jquery

jquery-validate

twitter-bootstrap