2

私はjQueryを初めて使用し、fn関数の記述に関するいくつかのチュートリアルを実行しましたが、最初のチュートリアルは機能しました。ただし、2番目のfn関数を追加すると、スクリプト全体が機能しなくなります。私の問題に対するフィードバックや解決策をいただければ幸いです。jQueryと使用しているHTMLフォームを含めました。

現在のフォームでは、ユーザーが[送信]を押したときにページの更新を停止することだけを目的としていますが、「jQuery.fn.clear」を追加したため、これは停止しています。

$(document).ready(function () {

    // Length validation
    jQuery.fn.validate = function (clength, value) {
        if ($.trim($(this).val()).length < clength || $.trim($(this).val()) == value) {
            $(this).val("You can't leave this blank!");
            return false;
        } else {
            return false;
        }
    };

    // Default value validation
    jQuery.fn.clear = function () {
        var value = $.trim($(this).val());
        if (value == "You can't leave this blank" || value == "Name" || value == "Email Address"
        value == "Telephone") {
            $(this).val("");
        }
    };

    $(function () {
        $(".submit-button").click(function () {
            $("#send-name").validate(1, "Name");
            $("#send-mail").validate(6, "Email Address");

            $(".spinny").fadeTo(0, 1);
            $(this).attr('value', 'Validating...');
            return false;
        });
    });
});

<form method="POST" action="">
    <div class="left">
        <label for="name">What's your name?</label>
        <input type="text" id="send-name" name="name"
        id="name" class="watermark" size="40" value="Name" />
        <br />
        <label for="email">Your Email</label>
        <input type="text" id="send-mail" name="email" size="40"
        class="watermark" Value="Email Address" />
        <br />
        <label for="number">Your contact number</label>
        <input type="text" id="send-number" name="number"
        size="40" class="watermark" value="Telephone" />
        <br />
    </div>
    <div class="right">
        <label for="message">How can I help?</label>
        <textarea name="message" id="message" class="watermark"
        cols="40" rows="10" title="Message"></textarea>
        <br />
        <Br />
        <img src="_img/spinny.gif" class="spinny" />
        <input type="submit" class="submit-button" value="Submit" />
    </div>
</form>
4

2 に答える 2

1

});あなたは前に忘れていました$(function () {。あなたも||前を忘れましたvalue == "Telephone"

実際には、単純に削除$(function () {してください。既にブロックがある場合、新しいドキュメント対応ブロックを開始する必要はありません。

$(document).ready(function () {

    // Length validation
    $.fn.validate = function (clength, value) {
        ...
    };

    // Default value validation
    $.fn.clear = function () {
        ...
    };


    $(".submit-button").click(function () {
        ...
    });
});

コードを改善するためのその他の提案:

  • $(this).attr('value'悪い。.val()要素の値を取得/設定するために常に使用します。
  • 何度も書かないでくださいjQuery。コードに との互換性を持たせたい場合は$.noConflict()、最初の行を次のように変更します。jQuery(document).ready(function($){
于 2012-05-06T09:20:05.537 に答える
0

ここに演算子がありません:

value == "Email Address"  value == "Telephone"

次のようにする必要があります。

value == "Email Address" || value == "Telephone"

});また、readyイベント ハンドラーの末尾がありません。ただし、ready ハンドラーで拡張機能を宣言する必要はまったくありません。

于 2012-05-06T09:20:36.263 に答える