避免在客户端提交表单

本文关键字：提交 表单 客户端 | 更新日期: 2023-09-27 17:57:45

我正试图弄清楚，如果按钮类型submit返回false，如何防止表单提交。这是我的密码。如果输入文本为空，我只想防止回发。

      <form action="{$action}" id="home-search-form-form">
        <div class="form-group">
            <span class="input-group">
             <input class="form-control" id="pal" type="text"/>
              <button type="submit" value="" onclick="return empty();" id="btn-search"/>
            </span>
          </div>
        </div>
      </form>
window.addEvent('domready', function () {
    var btnsearch = $('btnsearch');
    btnsearch.addEventListener('click', function (event) {
        empty();
    });
    function empty() {
        var searchInput = $('pal');
        alert(searchInput.get('text'));
        if (searchInput.get('text') == "") {
            return false;
        }
    }
});

提前感谢！！！

编辑

$('home-search-form-form').submit(function () {
    return empty();
});

function empty() {
    var searchInput = $('pal');
    alert(searchInput.get('text'));
    if (searchInput.get('text') == "") {
        // Show some error to the user,
        return false;
    }
    return true; // Changed here...
}

避免在客户端提交表单

您应该为提交事件添加一个监听器，并且您必须访问该值，输入没有文本：

$('home-search-form-form').addEvent('submit', function(e) {
    var searchInput = $('pal');
    if (searchInput.get('value') == "") {
        // Show some error to the user
        e.stop();
        return;
    }
    // everything ok, continue submission
});

正如Dimitar所说，如果验证失败，就停止该事件。

这是一把小提琴

顺便说一下，你的HTML是无效的。您正在关闭一个从未打开过的div。

同时从HTML中删除onclick处理程序，因为您已经使用jQuery/javaScript-附加了一个事件

<button type="submit" value="" onclick="return empty();" id="btn-search"/>

更改为-

<button type="submit" value="" id="btn-search"/>

返回调用empty()函数的结果；

    window.addEvent('domready', function () {
        var btnsearch = $('#btnsearch');  // Added #
        btnsearch.addEventListener('click', function (event) {
            return empty(); // Changed here...
        });
        function empty() {
            var searchInput = $('pal');
            alert(searchInput.get('text'));
            if (searchInput.get('text') == "") {
                // Show some error to the user,
                return false;
            }
            return true; // Changed here...
        }        
    });

如果您使用的是jQuery，那么您可能应该编写以下代码——

    $(function(){
        $('#btnSearch').click(function(){
            return empty();
        })
        function empty() {
            var searchInput = $('pal');
            alert(searchInput.get('text'));
            if (searchInput.get('text') == "") {
                // Show some error to the user,
                return false;
            }
            return true;
        }
    })

编辑-

根据@Tom的建议，我同意将其添加到表单的提交事件中总是一个更好的选择。请尝试此代码-

$(function(){
        $('#home-search-form-form').submit(function(){
            return empty();
        });
        function empty() {
            var searchInput = $('pal');
            alert(searchInput.get('text'));
            if (searchInput.get('text') == "") {
                // Show some error to the user,
                return false;
            }
            return true;
        }    
    })
相关文章：