jquery - jquery 検証プラグインが一貫して機能しない

Question

HTMLフォームを作成するためにTwitter Bootstrapを使用し、それを検証するためにJQuery検証プラグインを使用しています。私のコードは以下の通りです: HTML 部分

<form id="profile_form">
    <div class="control-group">
                <label class="control-label" for="firstname">firstname&nbsp;<span>*</span></label>

                <div class="controls">
                    <input type="text" id="firstname" name="firstname" class="input-medium"
                           value="<?php echo $firstname ?>">
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="lastname">lastname&nbsp;<span>*</span></label>

                <div class="controls">
                    <input type="text" id="lastname" name="lastname" class="input-medium"
                           value="<?php echo $lastname ?>">
                </div>
            </div>
</form>

この HTML は、検証コードが存在する外部の JavaScript ファイルを使用します。また、検証用のスクリプト ファイルの部分は次のようになります。

$(document).ready(function () {
    $('#profile_form').validate({
        rules: {
            firstname: {
                required: true
            },
            lastname: {
                required: true
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.closest('.control-group').addClass('valid').removeClass('error').addClass('success');
        }
    }); 
});

注意: このフォームに関連付けられた送信ボタンはありません。代わりに、ブートストラップ<a>でハイパーリンク ( ) とクラスbuttonを使用して、ボタンのようなアイテムを作成します。（私はそれが違いを生むとは思わない）。

上記の2つのフィールドに何かを入力しようとすると、入力が空の場合、対応する入力フィールドが赤い枠ですぐに強調表示されません。ここで私が欲しいものを明確にします：

ユーザーが最初に何を入力しても、入力フィールドは成功またはエラーを示す赤/緑の境界線で囲まれません。ユーザーがハイパーリンクをクリックする<a id="finalize_btn"></a>と、html ページが最初の無効な入力フィールドにジャンプし、すべての無効な入力フィールドが強調表示されます (エラー メッセージが表示される可能性があります)。ユーザーが何かを正しく入力すると、エラー メッセージが消え、成功を示す緑色の境界線が表示されます。

あなたが私の説明を理解してくれることを願っています。すべての潜在的な助けに感謝します!