Question

我想弄清楚如果按钮类型提交返回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;
        }
    }

});

提前致谢!!!

EDITED

$('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...
}

Answer 1

同样从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;
        }    
    })

Answer 2

你应该为submit事件添加一个监听器，你必须访问该值，输入没有文本：

$('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所说，只要验证失败就停止事件。

Here is a fiddle

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

避免表单在客户端提交

2 个答案: