Question

我有一个奇怪的问题，它真的开始让我烦恼。为代码墙和一些令人困惑的问题提前道歉。

我需要为用户显示一个模态表单，并让他们填写一些细节。

用户可以点击保存保存更改。
用户可以点击取消取消更改。
我使用save处理程序序列化表单并将其数据发送到JSON服务。

如果我有一个包含多个input字段的表单，则一切正常，并且没有任何意外情况发生。

但是，如果我的表单中包含单个input字段，则会出现意外的副作用。在该输入字段中按Enter / Return会导致提交模式表单，而不是我的JSON处理程序被调用页面将使用表单的参数作为参数重新加载 - 就像正在提交表单一样。实际上，向表单元素添加action=参数已经证明，当您导航到指定的页面时。

这是我正在使用的表格：

<form id="surveyQuestionForm" class="form-horizontal" style="display:none;">
    <div class="row">
        <input name="surveyQuestionId" id="surveyQuestionId" type="hidden">
        <input name="surveyId" type="hidden" value="${survey.surveyId}">
        <div class="control-group">
            <label class="control-label" for="questionType"><b><spring:message code="survey.question.type"/></b></label>
            <div class="controls">
                <select class="input-large" name="questionType" id="questionType">
                    <option value="">(Select one)</option>
                    <c:forEach items="${surveyQuestionTypes}" var="surveyQuestionType">
                        <option value="${surveyQuestionType.code}">${surveyQuestionType.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label" for="questionText"><b><spring:message code="survey.question.text"/></b></label>
            <div class="controls">
                <input type="text" class="input-xlarge" name="questionText" id="questionText" maxLength="64"/>
            </div>
        </div>
    </div>
</form>

这是我用来以模态方式显示表单的代码：

function addQuestion() {

    // find the form, and initialise its validation.
    var form = $('#surveyQuestionForm');
    var validator = form.validate(
        {
            rules: {
                questionType: {
                    required: true
                },
                questionText: {
                    required: true
                }
            },
            messages: {
                questionType: {
                    required: '<spring:message javaScriptEscape="true" code="survey.question.type.required"/>'
                },
                questionText: {
                    required: '<spring:message javaScriptEscape="true" code="survey.question.text.required"/>'
                }
            },
            onkeyup: false
        });

    // reset form validation, and hide any error message
    validator.resetForm();
    $("#errorMessage").hide();

    // show the dialog
    bootbox.dialog({
            title: '<i class="icon-plus green"/>&emsp;<spring:message javaScriptEscape="true" code="survey.add.question"/>',
            message: form,
            closeButton: false,
            buttons: {
                cancel: {
                    label: '<i class="icon-remove bigger-130"></i> <spring:message javaScriptEscape="true" code="button.cancel"/>',
                    className: "btn btn-danger"
                },
                save: {
                    label: '<i class="icon-ok bigger-130"></i> <spring:message javaScriptEscape="true" code="button.save"/>',
                    className: 'btn btn-success',
                    callback: function () {
                        var result = false;
                        if (!form.valid())
                            return false;
                        $.ajax({
                                type: "POST",
                                url: '/addSurveyQuestion.json',
                                async: false,
                                data: form.serialize(),
                                success: function (outcome) {
                                    if (outcome.success) {
                                        $('#question-list').dataTable().fnReloadAjax();
                                        result = true;
                                    }
                                    else {
                                        $("#errorMessage").html(htmlEncode(outcome.message)).show();
                                    }
                                }
                            }
                        ).fail(function () {
                                $.gritter.add({
                                        title: '<spring:message javaScriptEscape="true" code="general.error"/>',
                                        text: '<spring:message javaScriptEscape="true" code="server.error"/>',
                                        class_name: 'gritter-error'
                                    }
                                );
                            }
                        );
                        return result;
                    }
                }
            },
            show: false,
            animate: false,
            onEscape: false
        }
    ).on('shown.bs.modal', function () {
            var form = $('#surveyQuestionForm');
            form.find('#surveyQuestionId').val(null);
            form.find('#questionType').val('');
            form.find('#questionText').val('');
            form.show().find('#questionType').focus();
            form.show();
        }
    ).on('hide.bs.modal', function (e) {
            if (e.target === this)
                $('#surveyQuestionForm').hide().appendTo('body');
        }
    ).modal('show').addClass("bootboxDialog40");
}

如果我按原样使用此代码，使用Bootbox 4.4，当用户在questionText字段中时按Enter / Return提交表单，我的页面会重新显示，但表单字段为参数，例如：

page.html?surveyQuestionId=&surveyId=3&questionType=Y&questionText=blah

如果我有第二个 input字段，则在字段中按Enter / Return不会执行任何操作，并且用户必须点击Save或Cancel。

Answer 1

单个输入字段的输入提交是您需要覆盖的浏览器行为。你可以通过几种方式实现这一目标。

<form onSubmit="return false;">

我根本不认为您正在使用本机submit函数，因此添加此内联脚本会阻止表单提交。但是在您的标记中添加脚本并不是很好。一个小jQuery可以为你做同样的事情：

$('form').on('submit', function(){ return false; });

Answer 2

我认为这与bootbox插件无关。实际原因在这里： https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2

如果表单中只有一个单行文本输入字段，则用户代理应接受该字段中的Enter作为提交表单的请求。

进入解决方案后，您可以在表单中添加另一个隐藏字段，以防止在输入时提交表单。

当存在单个输入字段时，Bootbox错误地提交表单

2 个答案: