2

我的程序应该包含名称搜索和 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>

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

我观察到，当用户从文本字段中键入 'enter' 键时，会触发 click 事件，而不是 'submit'，所以我猜我的监听器只能绑定到 click 事件。

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

非常感谢！

4

3 回答 3

1

您可以使用表单中的提交事件，因此每次有人提交表单时它都会检查。jQuery - 提交

$('#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)
});
于 2012-10-15T20:00:13.903 回答
1

如果您仍然需要帮助... 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();如果您检查是否需要使用按钮输入并且不再需要提交输入，因为它们会触发提交事件。这只是一种方法。如果您正在寻找实时验证，您可以使用模糊事件而不是点击，但在文本输入和按钮的点击事件中，以确保它有效。我想当你必须做一些ajax时覆盖提交函数会起作用。希望能帮助到你。

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

于 2012-10-16T15:52:20.940 回答
0

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

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();
         }
    });
});
于 2012-10-15T20:09:26.217 回答