7

Jquery 検証プラグインを使用して、以下の 2 つの入力要素を検証します。入力が無効な場合、プラグインは入力フィールドの直後に次のようなラベル タグを生成します。<label for="company" style="">Required !</label>

<span class="help-inline">質問:新しい を生成する代わりに既存のエラー メッセージを表示するにはどうすればよい<label>ですか?

事前にご協力いただきありがとうございます。

<script type="text/javascript">

 $('#signUpForm').validate({
                            debug: false,
                            rules: {company:"required",username:"required"},
                         messages: {company:"Required !",username:"Required !"}
                          })// End of validate()

</script>


<div class="control-group">
   <label class="control-label" for="company">Company Name</label>
   <div class="controls">
      <input type="text" name="company">
      <label for="company">Required !</label> // -> this line is generated by Plug-In.
      <span class="help-inline">(required)</span>
   </div>
</div>

<div class="control-group">
   <label class="control-label" for="username">User Name</label>
   <div class="controls">
      <input type="text" name="username">
      <span class="help-inline">(required)</span>
   </div>
</div>
4

1 に答える 1

19

組み込みのオプションを活用して、プラグインにspan要素を作成させる方が簡単です。生成された HTML の最終結果は、要求したものになります。

  • errorElementをに変更するため<label>に使用し<span>ます。

  • errorClassデフォルトのエラー クラスを次のように変更するために使用します。help-inline

jQuery :

$(document).ready(function () {

    $('#signUpForm').validate({ // initialize the plugin
        errorElement: 'span',
        errorClass: 'help-inline',
        rules: {
            company: "required",
            username: "required"
        },
        messages: {
            company: "Required !",
            username: "Required !"
        }
    });

});

HTML :

<form id="signUpForm">
    <div class="control-group">
        <label class="control-label" for="inputCompanyName">Company Name</label>
        <div class="controls">
            <input name="company" type="text" id="inputCompanyName" placeholder="" />
        </div>
    </div>
    <div class="control-group">
        <label class="control-label" for="inputFirst">User Name</label>
        <div class="controls">
            <input name="username" type="text" id="username" placeholder="" />
        </div>
    </div>
    <input type="submit" />
</form>

デモ: http://jsfiddle.net/eRZFp/

ところで：あなたのUser Nameフィールドにはname属性がありませんでしたname="username"。このプラグインが正しく機能するには、すべての入力要素に固有のname属性が含まれている必要があります。

于 2013-06-10T17:37:41.663 に答える