javascript - 如何使用 e.preventDefault() 进行验证； MVC？

Question

当我点击SaveCompany按钮时，验证不是因为e.preventDefault();，那么如何使用e.preventDefault();进行验证？

$("#SaveCompany").click(function (e) {
    e.preventDefault();
    GetInfo();
});

表格

<div class="page-content">
    <div class="container-fluid">
        <header class="section-header">
            <div class="tbl">
                <div class="tbl-row">
                    <div class="tbl-cell">
                        <h2>Company Registration Form</h2>
                    </div>
                </div>
            </div>
        </header>
        @using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, new { enctype = "multipart/form-data" }))
        {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <section class="tabs-section">
                <div class="tabs-section-nav tabs-section-nav-icons">
                    <div class="tbl">
                        <ul class="nav" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" href="#tabs-1-tab-1" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="font-icon font-icon-cogwheel"></i>
                                        Company Registration Form
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tabs-1-tab-2" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <span class="glyphicon glyphicon-music"></span>
                                        Company Social Network
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tabs-1-tab-3" role="tab" data-toggle="tab">
                                    <span class="nav-link-in">
                                        <i class="fa fa-product-hunt"></i>
                                        Company Reference
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div><!--.tabs-section-nav-->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade in active show" id="tabs-1-tab-1">
                        <br />
                        <br />
                        <section>
                            <div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => Model.company.CompanyName, new { @class = "form-label semibold control-label" })
                                            @Html.TextBoxFor(model => model.company.CompanyName, new { @class = "form-control", @id = "txtCompanyName", placeholder = "Enter the Company Name" })
                                            @Html.ValidationMessageFor(model => model.company.CompanyName)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.ShortName, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.ShortName, new { @class = "form-control", @id = "txtShortName", placeholder = "Enter the Short Name" })
                                            @Html.ValidationMessageFor(model => model.company.ShortName)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Division, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Division, new { @class = "form-control", @id = "txtDivision", placeholder = "Enter the Division" })
                                            @Html.ValidationMessageFor(model => model.company.Division)
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Contact Person</label>
                                            @Html.TextBoxFor(model => model.company.ContactPerson, new { @class = "form-control", @id = "txtContactPerson", placeholder = "Enter the Contact Person Name" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Designation, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Designation, new { @class = "form-control", @id = "txtDesignation", placeholder = "Enter the Designation" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Email, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.Email, new { @class = "form-control", @id = "txtEmail", placeholder = "Enter your Email" })
                                            @Html.ValidationMessageFor(model => model.company.Email)
                                        </fieldset>
                                    </div>
                                </div>
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Address Line 1</label>
                                            @Html.TextBoxFor(model => model.company.Address1, new { @class = "form-control", @id = "txtAddress1", placeholder = "Enter your Address Line 1" })
                                            @Html.ValidationMessageFor(model => model.company.Address1)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Address Line 2</label>
                                            @Html.TextBoxFor(model => model.company.Address2, new { @class = "form-control", @id = "txtAddress2", placeholder = "Enter your Address Line 2" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.Country, new { @class = "form-label semibold" })
                                            @Html.DropDownList("Country", null, "--- Select Country ---", new { @class = "select2-arrow" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.State, new { @class = "form-label semibold" })
                                            <select id="state" class="select2-arrow"></select>
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Location / City</label>
                                            @*<select id="city" class="select2-arrow"></select><br />*@
                                            @Html.TextBoxFor(model => model.company.City, new { @class = "form-control", @id = "txtCity", placeholder = "Enter your Location / City" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Pincode / ZipCode</label>
                                            @Html.TextBoxFor(model => model.company.Pincode, new { @class = "form-control", @id = "txtPincode", placeholder = "Enter your Pincode" })
                                            @Html.ValidationMessageFor(model => model.company.Pincode)
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Country Code</label>
                                            @Html.TextBoxFor(model => model.company.CountryCode, new { @class = "form-control", @id = "txtCountryCode", placeholder = "Enter your Country Code" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Mobile Number</label>
                                            @Html.TextBoxFor(model => model.company.MobileNo, new { @class = "form-control", @id = "txtMobileNo", placeholder = "Enter your Mobile Number" })
                                            @Html.ValidationMessageFor(model => model.company.MobileNo)
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Phone Number</label>
                                            @Html.TextBoxFor(model => model.company.PhoneNo, new { @class = "form-control", @id = "txtPhoneNo", placeholder = "Enter your PhoneNo" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">PAN Number</label>
                                            @Html.TextBoxFor(model => model.company.PanNo, new { @class = "form-control", @id = "txtPanNo", placeholder = "Enter Company PanNo" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Tin Number</label>
                                            @Html.TextBoxFor(model => model.company.TinNo, new { @class = "form-control", @id = "txtTinNo", placeholder = "Enter Company TinNo" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">GST Number</label>
                                            @Html.TextBoxFor(model => model.company.GSTno, new { @class = "form-control", @id = "txtGSTno", placeholder = "Enter Company GSTno" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <div class="row">

                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.company.IECCode, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.company.IECCode, new { @class = "form-control", @id = "txtIECCode", placeholder = "Enter Company IECCode" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Upload Company Logo</label>&nbsp;&nbsp;
                                            <input type="file" name="ImageFile" id="txtUploadImage" style="cursor:pointer;" />
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            <label class="form-label semibold">Perview Image</label>&nbsp;&nbsp;
                                            <img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
                                            <a id="remove" onclick="javascript:ClearFileUploadControl();" style="display: none; cursor: pointer;">Remove</a>
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                                <br />
                                <input type="submit" name="Submit" id="SaveCompany" value="Save" class="btn btn-rounded btn-inline btn-success" />
                            </div>
                        </section>

                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-2">
                        <br />
                        <section>
                            <div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.CompanySocial.FaceBookID, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.CompanySocial.FaceBookID, new { @class = "form-control", @id = "txtFaceBookID", placeholder = "Enter the Facebook Link" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.CompanySocial.TwitterID, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.CompanySocial.TwitterID, new { @class = "form-control", @id = "txtTwitterID", placeholder = "Enter the Twitter Link" })
                                        </fieldset>
                                    </div>
                                    <div class="col-lg-4">
                                        <fieldset class="form-group">
                                            @Html.LabelFor(model => model.CompanySocial.linkedinID, new { @class = "form-label semibold" })
                                            @Html.TextBoxFor(model => model.CompanySocial.linkedinID, new { @class = "form-control", @id = "txtlinkedinID", placeholder = "Enter the Linkedin Link" })
                                        </fieldset>
                                    </div>
                                </div><!--.row-->
                            </div>
                        </section>
                        <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step " />
                        <input type="submit" name="Submit" id="saveSocial" value="Next" class="btn btn-rounded btn-inline btn-success" />
                    </div><!--.tab-pane-->
                    <div role="tabpanel" class="tab-pane fade" id="tabs-1-tab-3">
                        Tab 3
                        <br />
                        <br />
                        <input type="submit" name="Submit" value="Previous" class="btn btn-rounded btn-inline btn-primary prev-step" />
                        <input type="submit" name="Submit" value="Finish" class="btn btn-rounded btn-inline btn-success" />
                    </div><!--.tab-pane-->
                </div><!--.tab-content-->
            </section><!--.tabs-section-->
        }
    </div>
</div>

Answer 1

下面是一些相关帖子。

它们都指向调用元素或表单上的有效方法，具体取决于您要触发验证的级别。

例如，如果您的表单有一个 ID:

@using (Html.BeginForm("AddCompany", "Company", FormMethod.Post, new { id = "myForm", enctype = "multipart/form-data" })) {

然后通过该表单的 id 进行验证:

$('#myForm').valid()

Valid 显然会执行验证，然后还会返回表单或元素是否有效的结果。

Call MVC 3 Client Side Validation Manually for ajax posts

How to manually revalidate / trigger validation using unobtrusive jQuery validation?