.submit() 阻止表单提交答案

【问题标题】：.submit() Prevents Form from Submitting.submit() 阻止表单提交
【发布时间】：2018-11-07 14:28:52
【问题描述】：

我有一个相当简单的表单和 ViewModel 可以正常工作，但是当我添加这个 JS 时，表单不再提交给控制器：

$("#crmtForm").submit(function (e) {
    console.log('submit');
});

为什么？我很确定这应该可以工作...请有人帮忙，这没有任何意义。

控制器

[HttpPost]
public async Task<ActionResult> Create(CRMTItemViewModel viewModel)
{
    viewModel.CreatedBy = System.Security.Claims.ClaimsPrincipal.Current.Claims.FirstOrDefault(c => c.Type == "name").Value;
    if (viewModel.ProjectTitle == "spinnertest")
        return View();

    // Insert db rows?
    var crmtItem = await crmtItemsManager.InsertItem(viewModel);

    // Initialise workspace on a seperate thread
    new Thread(() =>
    {
        var projectManager = new ProjectManager();
        projectManager.ProcessRequest(crmtItem);
    }).Start();

    // Redirect to item
    return RedirectToAction("Details", new { id = crmtItem.Id });
}

表格

@using (Html.BeginForm("Create", "CrmtItems", FormMethod.Post, new { id = "crmtForm" }))
{
<div class="form-horizontal">
    <h4>New Project Workspace Form</h4>
    <hr />


    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.ProjectTitle, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.ProjectTitle, new { htmlAttributes = new { @class = "form-control", required = "required" } })
            @Html.ValidationMessageFor(model => model.ProjectTitle, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.ProjectStage, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EnumDropDownListFor(model => model.ProjectStage, new { @class = "form-control", required = "required" })
            @Html.ValidationMessageFor(model => model.ProjectStage, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.CRMTNumber, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.CRMTNumber, new { htmlAttributes = new { @class = "form-control", required = "required" } })
            @Html.ValidationMessageFor(model => model.CRMTNumber, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.GbSNumber, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.GbSNumber, new { htmlAttributes = new { @class = "form-control", required = "required" } })
            @Html.ValidationMessageFor(model => model.GbSNumber, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Confidential, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.CheckBoxFor(model => model.Confidential, new { @class = "form-control", @style = "height:17px;" })
            @Html.ValidationMessageFor(model => model.Confidential, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => Model.SelectedTags, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.HiddenFor(m => m.Id, new { required = "required" })
            @Html.ListBoxFor(m => m.SelectedTags, new SelectList(users, "UserName", "DisplayName"), new { @class = "teamSelecter", name = "states[]", multiple = "multiple", style = "display:none; width:100%;", required = "required" })
            @Html.ValidationMessageFor(model => model.SelectedTags, "", new { @class = "text-danger" })
            <p id="pmWarning" class="text-danger" hidden>Please select one or more project managers</p>
        </div>
    </div>

    <br />
    <button id="formSubmit" class="btn btn-default btn-lg pull-right" type="submit" value="submit">Submit</button>
    <div class="loader pull-right" hidden></div>

</div>
}

视图模型

public class CRMTItemViewModel
{
    public int Id { get; set; }

    [Display(Name = "Project Title")]
    [Remote("DoesProjectTitleExist", "CRMTItems", HttpMethod = "POST", 
        ErrorMessage = "Workspace for that project title already exists.")]
    public string ProjectTitle { get; set; }

    [Display(Name = "Project Stage")]
    public ProjectStage? ProjectStage { get; set; }

    [Display(Name = "CRMT Number")]
    [Remote("DoesCrmtNumberExist", "CRMTItems", HttpMethod = "POST",
        ErrorMessage = "Workspace for that CRMT number already exists.")]
    public int? CRMTNumber { get; set; }

    [Display(Name = "GBS Number")]
    [Remote("DoesGbSNumberExist", "CRMTItems", HttpMethod = "POST", 
        ErrorMessage = "Workspace for that GBS project number already exists.")]
    public int? GbSNumber { get; set; }

    public bool Confidential { get; set; }

    [Display(Name = "Project Managers")]
    public IEnumerable<string> SelectedTags { get; set; }
}

【问题讨论】：

不相关，但您应该删除所有required = "required" 属性，并在属性中添加[Required] 属性，并包含用于客户端验证的脚本
@StephenMuecke 感谢斯蒂芬的评论。您所说的“客户端评估脚本”是指例如DoesProjectTitleExist 控制器等？
不，我的意思是添加 jquery.validate.js 和 jquery.validate.unobtrusive.js 脚本
@StephenMuecke 我只是使用默认的验证脚本（v1.17.0 validate 和 v3.2.10 unobtrusive），但我还在我的 _layout 中添加了 $.validator.setDefaults({ ignore: '' }); 以便它与 select2 一起使用跨度>
您的 JavaScript 是否有任何错误？我的意思是，如果您打开开发工具并提交表单，您会在浏览器开发工具中看到任何错误吗？

标签： c# jquery asp.net-mvc forms

【解决方案1】：

我在我的项目中尝试了你的代码，它的工作，可能是你的 jquery 版本的问题，当我用这个模型创建脚手架视图时，我发现了另一件事，它在视图页面的末尾自动创建了@section Scripts { @Scripts.Render("~/bundles/jqueryval") }，当我从页面中删除此脚本时，可以调用 post 方法，否则不能。

【讨论】：