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>

コードは1つの問題を除いて正しく動作します。ユーザーがテキストボックスをクリックすると、クリックイベントが発生し、アラートメッセージボックスが事前に生成されます。

ユーザーがテキストフィールドから「Enter」キーを入力すると、「submit」ではなくクリックイベントがトリガーされるので、リスナーはクリックイベントにのみバインドできると思います。

テキストボックスをマウスでクリックすることによるイベントのトリガーを回避するための回避策があるかどうか尋ねてもよいですか？

どうもありがとう！

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();ます。チェックすると、送信イベントがトリガーされるため、ボタン入力を使用する必要があり、送信入力は使用しなくなります。これは1つのアプローチにすぎません。ライブ検証を探している場合は、クリックの代わりにぼかしイベントを使用できますが、テキストの入力とボタンへのクリックイベントで、それが機能することを確認します。いくつかの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 に答える