0

Joren Rapini のブログからこのコードにもう 1 つ機能を追加しようとしています。これは単純なフォーム バリデータです。プロジェクトの性質上、実際の AJAX 送信またはページ機能の更新を行うためのテストにあまりアクセスできません。だから私は検証コードを使用しようとしていますが、さらに、すべての必須フィールドが入力され、送信ボタンがtrueに設定されていることで「アクティブ」になると、a)フォームコンテナのdivとbを非表示にしたい) 以前に非表示にした div を表示します。

だから私たちはこれを持っています：

$(document).ready(function(){
// Place ID's of all required fields here.
required = ["first_name", "last_name", "email", "street_address"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";

$("#unique-form").submit(function(){    
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        return true;
    $("#placeHolder #myForm").hide();
    $("#placeHolder #stuff").show();
    }
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }
}); });

そして、私のコードはこのビットです:

$("#placeHolder #myForm").hide();
    $("#placeHolder #stuff").show();

これはうまくいきません。#stuff div に感謝メッセージといくつかのソーシャル メディア リンクを非表示にして、基本的にフォームの送信時に感謝ページの AJAX ロードを複製しようとしています。しかし、私はクライアントに制限があります。サーバーで多くのテストを行ったり来たりすることはできません。これに対する非常に単純なフロントエンドソリューションを装備しようとしています。検証部分は必要に応じて機能しているようで、コード内のすべての div id が正しいので、このイベント処理の構造にはまだ理解していない概念があり、締め切りがあることを知っています。近づいているので、誰かアイデアがあれば助けを求めています。

構造または構文に何かが欠けていることはわかっていますが、それが何であるかはわかりません。別の関数を作成して、代わりにそれを呼び出す必要がありますか? 前もって感謝します。

更新: わかりやすくするために、使用しているコードの簡素化されたバージョンを再投稿しています。フォームの包含要素を非表示にしようとしています (包含要素に使用している ID は実際には「#form-holder」であり、最初に非表示の div は「#thank-you」です。私の問題はセレクターではなく、それはjavascript / jQueryロジックにあります（まあ、それはロジックを理解していません:)-または、フォーム送信ボタンをクリックするロジックの継承が原因である可能性もありますコメントで述べているように、今のところ、これは機能させるためのギリシャ語のテキストですが、最終的には、Twitter のリンクなどを含む「ありがとう」のテキスト メッセージになりますが、ロジックを取得する必要があります。最初に正しく機能します。 

                $(document).ready(function(){
// Place ID's of all required fields here.
required = ["email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
formholder = $('#form-holder');
thankyou = $("#thank-you");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";

$("#myForm").submit(function(){ 
    //Validate required fields
    for (i=0;i<required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($(":input").hasClass("needsfilled")) {
        return false;
    } else {
        errornotice.hide();
        formholder.hide();
        thankyou.show();
        return true;
    }
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }
});});</script>

そして、コードの上部近くに変数として formholder と thankyou を追加したことがわかります。以下は HTML のバージョンです。

 <div id="form-holder">
<form id="myForm" class="form">
<p class="names form-paragraph clearfix">
<span class="first_name">
<label for="name">First Name</label>
<input type="text" required="required" name="first_name" id="first_name" /></span>
<span class="last_name">
<label for="name">Last Name</label>
<input type="text" required="required" name="last_name" id="last_name" /></span>
</p>
<p class="email form-paragraph">
<label for="email">Email*</label>
<input type="text" required="required" name="email" id="email" />
</p><p id="error">There were errors on the form, please make sure all fields are fill out correctly.</p>
<p class="small-text">* Required Field</p>
<p class="submit"><span><input type="submit" value="SUBMIT" id="formSubmit" /></span>
<span><button type="reset" value="RESET">RESET</button></span></p></form>
<div id="thank-you"><p>At vero eos et accusamus et iusto odio dignissimos ducimus qui    blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p></div>
4

2 に答える 2

0

皆様のコメント、そしてアデネオ様からの最終コメントを拝見して、当初の予定通りにやろうとしていたことが実現できなかったことに気づきました。だから私は現在、Nettuts +のチュートリアルに基づいて非常に単純なAJAX検証/送信を試みています（そして、私の指を交差させておきます）：http://net.tutsplus.com/tutorials/javascript-ajax/submit-a-form -ページの更新なし-jquery を使用/

アデネオ より:

いいえ、 preventDefault() を使用する場合、デフォルトのアクションでフォームを送信しません。そのためには、Ajax で送信する必要があります。そうしないと、フォームが送信されるとサイトが常に更新されます。はい、それを停止する唯一の解決策です。ページの更新からは ajax を使用します。

みんなの助けに感謝します。

于 2012-04-25T01:03:36.473 に答える
0

そのコードはあまり詳しく見ていませんが、return true ステートメントの後に 2 行のコードを追加したため、コードが実行される前に関数が終了して true が返されるため、何を記述しても問題ありません。実行されることはありません。

return ステートメントの前に、コードを 1 段階上げる必要があります。コードが正しければ、動作する可能性があります。これは、マークアップがわからず、実際に多くを語ることはできないため、わかりません。セレクターの選択。

if ($(":input").hasClass("needsfilled")) {
    return false;
} else {
    errornotice.hide();
    //the below seems like strange selectors, they could be valid, 
    //but just using the latter would suffice as they are ID's
    $("#placeHolder #myForm").hide(); 
    $("#placeHolder #stuff").show();
    return true;
}
于 2012-04-23T22:26:50.840 に答える