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!

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!

• javascript
• jquery

Share Improve this question Follow asked Oct 15, 2012 at 19:49 ssgaossgao 5,59166 gold badges3939 silver badges5353 bronze badges 3

• I believe what you looking for is change event or form submit event and not click – Selvakumar Arumugam Commented Oct 15, 2012 at 19:52
• Thanks a lot for the answer. Yes I am expecting for submit event, but when the user types enter, the event that is fired is click, so even if I listen to submit event, I will never be able to catch it. Also, change event is not a good fit as well. My validation code is only expected to execute when the user is trying to submit the form. – ssgao Commented Oct 15, 2012 at 19:57
• See my answer below.. that would be one way of doing it.. – Selvakumar Arumugam Commented Oct 15, 2012 at 20:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

In case you still need help... http://jsfiddle/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/jaxkodex/S5HBx/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)
});

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