jQuery表单仅提交一秒钟的单击

Question

I have a form in .NET MVC that can be submitted by multiple buttons. Each button set the eventCommand hidden field to a specific value then submits the form like so:

$(document).ready(function(){
    $("[data-crm-action]").on("click", function (e) {
        e.preventDefault();
        $("#EventCommand").val($(this).data("crm-action"));
        $("form").submit();
    });
});

However, I need to click twice on a button to see the form submitted. Why doesn't it submit on the first click? At the first click, the cursor is sent back to the text box for the search field. The email field is tagged required in the model with annotations but i tried to add formnovalidate to my buttons and it still does it.

Here is some code from the view:

@using (Html.BeginForm())
{
@Html.HiddenFor(m => m.EventCommand)
@Html.HiddenFor(m => m.IsValid)
@Html.HiddenFor(m => m.Mode)

<!-- BEGIN SEARCH AREA -->
if (Model.IsSearchAreaVisible)
{
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1 class="panel-title">Search for Users</h1>
        </div>
        <div class="panel-body">
            <div class="form-group">
                @Html.LabelFor(m => m.SearchEntity.Email):
                @Html.TextBoxFor(m => m.SearchEntity.Email, new { @class = "form-control" })
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSearch" class="btn btn-sm btn-primary" data-crm-action="search">
                <i class="glyphicon glyphicon-search"></i>&nbsp;Search
            </button>
            <button id="btnReset" class="btn btn-sm btn-primary" data-crm-action="resetsearch">
                <i class="glyphicon glyphicon-share-alt"></i>&nbsp;Reset
            </button>
            <button id="btnAdd" class="btn btn-sm btn-success" data-crm-action="add">
                <i class="glyphicon glyphicon-plus"></i>&nbsp;Add
            </button>
        </div>
    </div>
}
<!-- END SEARCH AREA -->

<!-- BEGIN DETAIL AREA -->
if (Model.IsDetailAreaVisible)
{
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h1 class="panel-title">User Information</h1>
        </div>
        <div class="panel-body">
            <!-- BEGIN MESSAGE AREA -->
            <div class="row">
                <div class="col-sm-12">
                    @if (!Model.IsValid)
                    {
                        <div class="alert alert-danger alert-dismissable" role="alert">
                            <button type="button" class="close" data-dissmiss="alert">
                                <span aria-hidden="true">
                                    &times;
                                </span>
                                <span class="sr-only">Close</span>
                            </button>
                            @Html.ValidationSummary(false)
                        </div>
                    }
                </div>
            </div>
            <!-- END MESSAGE AREA -->
            <div class="form-group">
                @Html.LabelFor(m => m.Entity.FirstName)
                @Html.TextBoxFor(m => m.Entity.FirstName, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.LastName)
                @Html.TextBoxFor(m => m.Entity.LastName, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.Title)
                @Html.TextBoxFor(m => m.Entity.Title, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.Email)
                @Html.TextBoxFor(m => m.Entity.Email, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.Phone)
                @Html.TextBoxFor(m => m.Entity.Phone, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.PhoneExtension)
                @Html.TextBoxFor(m => m.Entity.PhoneExtension, new { @class = "form-control" })
                @Html.LabelFor(m => m.Entity.IsActive)
                @Html.EditorFor(m => m.Entity.IsActive)
                @Html.LabelFor(m => m.Entity.AccessLevelID)
                @Html.TextBoxFor(m => m.Entity.AccessLevelID, new { @class = "form-control" })
            </div>
        </div>
        <div class="panel-footer">
            <button id="btnSave" class="btn btn-sm btn-primary" data-crm-action="save" formnovalidate="formnovalidate">
                <i class="glyphicon glyphicon-floppy-disk"></i>&nbsp;Save
            </button>
            <button id="btnCancelAdd" class="btn btn-sm btn-primary" data-crm-action="cancelAdd" formnovalidate="formnovalidate">
                <i class="glyphicon glyphicon-remove-sign"></i>&nbsp;Cancel
            </button>
        </div>
    </div>
}

Answer 1

I use the same request management pattern and have two validation summary fields (one is within modal window that works perfectly though I do not see why the same odd behaviour is not shown) that I need to suppress validation before submit.

I have tried setting,

formnovalidate="formnovalidate"

tag for the buttons I hope to suppress validation and this works with only an annoying side effect that is mentioned here.

What worked for me is, on js side setting the e.preventdefault as an option for only the request I want to validate like below:

command = $(this).data("gtb-action");
if (command === "PostNoteEntity") {
    e.preventDefault();
}

Please, do try!