1

私が抱えている問題は、すべてのフィールドが空の場合、またはすべてのフィールドが空の場合、コードが false を返すように作成されているにもかかわらず、フォームがまだ送信されることです。

私のHTML：

<form action="" method="post" name="contactForm" id="contactForm">
    <input type="text" name="contactName" id="contactName" class="contactTextfield" />
    <input type="text" name="contactPhone" id="contactPhone" class="contactTextfield" />
    <input type="text" name="contactEmail" id="contactEmail" class="contactTextfield" />
    <textarea name="contactMessage" id="contactMessage" class="contactTextarea" rows="5"></textarea>
    <input type="submit" name="contactSubmit" id="contactSubmit" value="Send"/>
</form>

私のjQuery：

$("#contactForm").submit( function() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    if ( contactEmail != '' && emailFormat.test(contactEmail) ) {
        var contactEmailCheck = true;   
    }

    if ( contactName != '' ) {
        var contactNameCheck = true;
    }

    if ( contactMessage != '' ) {
        var contactMessageCheck = true;
    }

    if ( contactEmailCheck == true && contactNameCheck == true && contactMessageCheck == true ) {
        return true;
    } else {
        return false;
    }
});

修繕：

jqueryコードがインデックスページのヘッダーにあり、フォーム自体が別のhtmlファイルからajaxを介してページにロードされただけであるため、機能していないことが判明しました。フォームと同じファイル内に jquery コードを配置する必要がありました。

4

2 に答える 2

1

これはスコープの問題です。ifstatemenetsの外部に変数を割り当てます。

これを試して

$("#contactForm").submit(function() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var contactEmailCheck = false;
    var contactNameCheck = false;
    var contactMessageCheck = false;
    if (contactEmail != '' && emailFormat.test(contactEmail)) {
        contactEmailCheck = true;
    }

    if (contactName != '') {
        contactNameCheck = true;
    }

    if (contactMessage != '') {
        contactMessageCheck = true;
    }

    if (contactEmailCheck && contactNameCheck && contactMessageCheck) {
        return true;
    } else {
        return false;
    }
});​
于 2012-10-05T17:51:22.403 に答える
0

私はこれをお勧めします：最初に送信ボタンの入力タイプを「送信」から「ボタン」に変更してください。

<input type="button" name="contactSubmit" id="contactSubmit" value="Send"/>

jquery ドキュメント準備完了関数のこのボタンにクリック イベントをバインドするか、適切と思われる場所にバインドします。そして、その [送信] ボタンをクリックすると、すべての検証を行う関数が呼び出され、すべてが正常であればそこからフォームが送信されます。それ以外の場合は、エラーまたはアラートが表示されます。

#('#contactForm').click(function(){
    validateForm();
});

また、関数で作成された ro 検証フォームには、スコープの問題がいくつかあります。

function validateForm() {
    var contactName = $("#contactName").val();
    var contactEmail = $("#contactEmail").val();
    var contactMessage = $("#contactMessage").val();
    var emailFormat = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    var contactEmailCheck = false;
    var contactNameCheck = false;
    var contactMessageCheck = false;

    if ( contactEmail != '' && emailFormat.test(contactEmail) ) {
        contactEmailCheck = true;
    }

    if ( contactName != '' ) {
        contactNameCheck = true;
    }

    if ( contactMessage != '' ) {
        contactMessageCheck = true;
    }

    if ( contactEmailCheck == true && contactNameCheck == true && contactMessageCheck ==     true ) {
        //submit form from here since everything is fine
        $('#contactForm').submit(); //contactForm is your form id
    } else {
        //show errors here & don't submit form
    }
}

試してみる。確かに動作します。

于 2012-10-05T18:42:54.450 に答える