how to add event handler for input text box

Question

My program should contain both name search and ID search functionality, when user clicks the name search button, a name search validation is triggered to make sure that the required text field is not empty, on the other hand, when user clicks the id search button, an id search validation is triggered to make sure that a different required text field is not empty. So on the HTML file, I have the following jQuery and HTML codes.

    $(document).ready(function() {
        $('#submitIDSearch').bind('click', validateIDSearch);
        $('#submitNameSearch').bind('click', validateNameSearch);
        $('#searchLastName').bind('click', validateNameSearch);
        $('#searchFirstName').bind('click', validateNameSearch);
        $('#searchID').bind('click', validateIDSearch);
    });

    var validateNameSearch = function(event) {
        var btnSrchLastName = getRef('searchLastName');
        if (null != btnSrchLastName) {
            var len = btnSrchLastName.value.length;
            if (0 == len) {
                alert('Last Name is a required field, please input Last Name.');
                $('#searchLastName').focus();
                return false;
            }
        }
        return true;
    }

    var validateIDSearch = function(event) {
        var btnSrchID = getRef('searchID');
        if (null != btnSrchID) {
            var len = btnSrchID.value.length;
            if (0 == len) {
                alert('ID is a required field, please input ID.');
                $('#searchID').focus();
                return false;
            }
        }
        return true;
    }

And I have the following HTML code:

    <form id="infoForm" name="checkAbsenceForm" method="post" action="absenceReport.htm">
        <label class="q">ID * <input id="searchID" name="searchID" maxlength="9" /></label>
        <input id="submitIDSearch" type="submit" value="Search ID"/>
        <hr />
        <label class="q">First Name <input id="searchFirstName" name="searchFirstName" maxlength="23"></label>
        <br />
        <label class="q">Last Name * <input id="searchLastName" name="searchLastName" maxlength="23" /></label>
        <input id="submitNameSearch" type="submit" value="Search Name"/>
        <hr />
    </form>

The code behaves correctly except for one problem, when ever the user clicks on the textbox, a click event is fired, which cause a pre-generation of the alert message box.

I observed that when the user types 'enter' key from a text field, a click event is triggered, instead of 'submit', so I guess my listener can only be bind to the click event.

May I ask if there's a workaround method to avoid event triggering from mouse clicking on the textbox?

Thanks a lot!

Answer 1

You can use the submit event from the form, so it will check every time someone submits the form. jQuery - Submit

$('#infoForm').submit(function (event){
    if (!validateIDSearch() && !validateNameSearch()){
        event.preventDefault(); // Prevent the submit event, since didn't validate
    }
    // Will continue to the dafault action of the form (submit it)
});

Answer 2

In case you still need help... http://jsfiddle.net/jaxkodex/Cphqf/

$(document).ready(function() {

    $('#submitNameSearch').click(function(event) {
        event.preventDefault();
        if (validate($('#searchLastName'), 'Last name field is required.')) {
            $('#infoForm').submit();
        }
    });

    $('#submitIDSearch').click(function(event) {
        event.preventDefault();
        if (validate($('#searchID'), 'ID field is required.')) {
            $('#infoForm').submit();
        }
    });
});

function validate(input, errorMsg) {
    if (input.val() == null || input.val().length == 0) {
        alert(errorMsg);
        return false;
    }
    return true;
}

Since you are using jQuery, You can submit the form whenever a button is clicked with $('#infoForm').submit(); If you check you'd need to use button inputs and no submit inputs any more, since they will trigger the submit event. This is just one approach. If you are looking for live validation, you could use the blur events instead of click but in the text inbut and the click event to the buttons to make sure it works. I guess that overwritting the submit function would work when you have to do some ajax. Hope it helps.

[Edit] If you want to keep the buttons as submit you can do some thing like: http://jsfiddle.net/jaxkodex/S5HBx/1/

Answer 3

You just need to set what button the user has selected and do validation based on that during form submit.

searchLastName searchFirstName submitNameSearch are calling validateNameSearch, and submitIDSearch searchRUID are calling validateIDSearch

 $(function () {

    var validateFx = null; //none selected;

    $('#submitNameSearch, #searchLastName, #searchFirstName')
        .bind('click', function () {
           validateFx = validateIDSearch;
        });
    $('#searchIDSearch, #searchRUID')
       .bind('click', function () {
         validateFx = validateNameSearch;
       });

    $('#infoForm').submit(function (event){
         event.preventDefault();

         if (validateFx != null && validateFx ()) {
            $(this).submit();
         }
    });
});