jquery - クライアント検証でjqueryを使用して関連するテキストボックスの色を変更する

Question

jquery を使用して、必要な関連要素の親を選択し、css クラスを変更したいと考えています。

必須フィールドのスパンの親 div に css クラス「エラー」を追加する必要があります。（これにより、CSSに従ってテキストボックスに色が付けられます）。

aspx ページによって最初に生成される次の html マークアップがあります。

<div class="control-group">
  <label>Your name</label>
  <input name="ctl00$MainContent$txtName" type="text" maxlength="100" id="MainContent_txtName">
  <span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display:none;">This field is required</span>
</div>

「クライアント検証」の後、スパンは次のように変更されます。

<span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="display: inline;">This field is required</span>

サーバーのポストバック後、スパンは実際には次のようになります。

<span data-val-controltovalidate="MainContent_txtName" data-val-errormessage="Your name is required" data-val-display="Dynamic" data-val-isvalid="False" id="MainContent_txtNameRequired" class="error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="">This field is required</span>

これが使用される各ボタンで onclick 関数を必要としない 1 つの JavaScript 関数を使用したいと思います。多くのページで同じ機能を再利用したい。