alert() 触发表单提交

Posted 2023-05-08

【中文标题】alert() 触发表单提交

【英文标题】：alert() triggers form submission

【发布时间】：2013-06-25 21:53:51

【问题描述】：

我正在尝试消除type=text 上的“输入事件”默认值，这会触发表单上的提交。我这样做了：

var onEnter = function(values)
    $("#"+values['id']).keydown(function(e)
        if (e.which == 13) 
            event.preventDefault();
            var function_to_call = window[values['function']];
            if(typeof function_to_call === 'function')
                if(values['parameters']!= null)
                    parameters = values['parameters'];
                    var args;

                    if(typeof parameters === 'string')
                        args = parameters.split(',');
                    else
                        args = new Array(parameters);

                    function_to_call.apply(window, args);
                
                else function_to_call();
            
            return false;
        
    );

取消默认事件的重要代码是

event.preventDefault();
return false;

其余代码只是调用带参数或不带参数的函数。问题是，在被调用的函数内部，有一个触发警报的条件。这是交易：

如果警报未触发，[enter] 不会触发表单提交 如果触发警报，则触发表单提交

每个type=text调用的函数都是一样的，这里是警报条件：

......
if(!regex_match(item))
        alert("Solo son posibles los siguientes caracteres: '.' ',' 'a-z' 'a-Z' '0-9' y ' '");
        return;
 
 .....

var regex_match = function(text)
    regex = /^[_., 0-9a-záéíóúñ]+$/i;
    return regex.test(text);

尝试过的事情：

“return false;”在alert(...)之后；

我是 javascript 新手，谁能指出为什么会发生这种情况？提前致谢！

【问题讨论】：

您自己说return false 阻止了表单提交，但您没有警报。 （event.preventDefault() 应该足够了，但从这个问题来看，它是否曾被应用尚不清楚。）

请从头开始，解释整个事情的目的是什么。如果您使用表单来 ajax 东西，请移除提交按钮并在提交事件中返回 false。如果没有，请告诉我们更多信息

另外你想把event.preventDefault()改成e.preventDefault()

【参考方案1】：

对此我感到相当惊讶（并希望您会发现行为因浏览器而异），但 alert 是一个有趣的野兽，与浏览器环境的其余部分有些不一致，所以...

由于您总是想停止默认行为，我建议：

不要使用alert，这无论如何都相当丑陋（使用jQuery的许多“模态”对话框插件中的任何一个，或者只使用样式化、绝对定位的div )，或

从事件处理序列中取出alert，如下所示：

var onEnter = function (values) 
    $("#" + values['id']).keydown(function (e) 
        if (e.which == 13) 
            setTimeout(finishHandling, 0);
            return false;
        

        function finishHandling() 
            var function_to_call = window[values['function']];
            if (typeof function_to_call === 'function') 
                if (values['parameters'] != null) 
                    parameters = values['parameters'];
                    var args;

                    if (typeof parameters === 'string')
                        args = parameters.split(',');
                    else
                        args = new Array(parameters);

                    function_to_call.apply(window, args);
                 else function_to_call();
            
        
    );

第二个选项的作用是让事件处理程序在您调用alert 之前完成，方法是安排对finishHandling 的回调几乎立即发生，但在事件处理完成之后。 （我还删除了对 event.preventDefault() 的调用，因为来自 jQuery 事件处理程序的 return false; 同时执行 event.preventDefault() 和 event.stopPropagation()。当 alert 在那里时，您可能需要它，但您不需要它.)

【讨论】：

很好，清晰的解释。谢谢一堆。我将研究您不使用 alert() 的第一个建议。