Avoid form Submit on client

Question

I am trying to figure it out how to prevent a form submission if a button type submit return false. This is my code. I just want to prevent a postback if the the input text is empty.

      <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;
        }
    }

});

Thanks in advance!!!

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

You should add a listener for the submit event and you have to access the value, inputs do not have text:

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

Like Dimitar said, just stop the event if validation fails.

Here is a fiddle

By the way, your HTML is invalid. You are closing a div which was never opened.

Answer 2

Also remove the onclick handler from HTML because you are already attaching an event using jQuery/javaScript -

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

change to -

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

Return the result of calling the empty() function;

    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...
        }        
    });

If you are using jQuery, you should probably write this code instead --

    $(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;
        }
    })

EDIT -

As suggested by @Tom, I agree that adding it to the form's submit event is always a better choice. Please try this code -

$(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;
        }    
    })