Question

我的程序应包含名称搜索和ID搜索功能，当用户单击名称搜索按钮时，会触发名称搜索验证以确保所需的文本字段不为空，另一方面，当用户单击时id搜索按钮，触发id搜索验证以确保不同的必需文本字段不为空。所以在HTML文件中，我有以下jQuery和HTML代码。

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

我有以下HTML代码：

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

代码行为正确，除了一个问题，当用户点击文本框时，会触发点击事件，这会导致预生成警报消息框。

我观察到当用户从文本字段中键入“输入”键时，会触发点击事件，而不是“提交”，所以我想我的侦听器只能绑定到点击事件。

请问是否有一种解决方法可以避免鼠标点击文本框时触发事件？

非常感谢！

Answer 1

您可以使用表单中的提交事件，因此每次有人提交表单时都会检查。 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

如果您仍需要帮助...... 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;
}

由于您使用的是jQuery，只要单击按钮$('#infoForm').submit();，您就可以提交表单。如果您检查是否需要使用按钮输入而不再提交输入，因为它们将触发提交事件。这只是一种方法。如果您正在寻找实时验证，您可以使用模糊事件而不是单击，但在文本inbut和click事件中使用按钮以确保它有效。我想当你必须做一些ajax时，覆盖提交函数会有效。希望它有所帮助。

[编辑] 如果您想将按钮保持为提交状态，您可以执行以下操作：http://jsfiddle.net/jaxkodex/S5HBx/1/

Answer 3

您只需设置用户选择的按钮，并在表单提交期间根据该按钮进行验证。

searchLastName searchFirstName submitNameSearch正在调用validateNameSearch，submitIDSearch searchRUID正在调用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();
         }
    });
});

如何为输入文本框添加事件处理程序

3 个答案: