web-dev-qa-db-ja.com

Parsley.js-指定された要素のエラーの表示

Parsley.js を使用して、エラーメッセージを保持する要素を指定することは可能ですか？私は試した：

$('#myForm').parsley({
    errors: {
        container: {
            $('#errorMessages')
        }
    }
});

しかし、エラーメッセージはフォーム入力の直後に表示されます。

javascriptjqueryjquery-pluginsparsley.js
11
Alix Axel

別のデータ属性data-parsley-errors-container="#element"を追加しました。これにより、DOMを変更して、エラーメッセージを表示する場所を指定できます。

詳細はこちら： http://parsleyjs.org/doc/index.html#ui-for-field

ベスト

31
guillaumepotier

containerキーで提供される関数からtrueを返しました。

私のHTML要素

<input type="text" class="input-small" errorSpan="yyy"  id="ddd" name="ddd" value="" data-required="true">
<span id="yyy"></span>

Javascript

$('#abc').parsley({
            errors: {
                classHandler: function ( elem ) {}
              , container: function ( elem, template, isRadioOrCheckbox ) {
                   //here i have span msg. id to be displayed as custom attribute in input element
                    $('#' + $(elem).attr('errorSpan')).html(template);
                    return true;//returning back boolean makes it work
                  }
              , errorsWrapper: '<ul></ul>'
              , errorElem: '<li></li>'
              }
        });

戻っても動作します

return $('#' + $(elem).attr('errorSpan')).html(template);

お役に立てれば......

6
baba.kabira

これを行うには、コールバック関数を使用する必要があります

たとえば、要素の親にエラーメッセージを添付する簡単な例を次に示します。

$('#myForm').parsley({
    errors: {
        container: function ( elem ) {
            return $( elem ).parent();
        }
    }
});

編集：1.1.10-devで作業して、上記のようにエラーコンテナを定義する方法を変更しました。注意してください、これはBCブレイクです。

3
guillaumepotier

data-parsley-errors-container="#your-div-id"私のために働いた

<div class="form-group">
  <label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
  <div class="col-md-6 col-sm-6 col-xs-12">
       <div class=" datetimepicker3 input-append timepick">
          <input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required"  id="startTime" />
          <span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>  
       </div>   
      <div id="startTimeErrorContainer"></div>                                            
  </div>
2
Siva Anand

@guillaumepotier jquerymobileでコードを試しましたが、画面にエラーメッセージが表示されません。クラス「help-inline」にエラーメッセージを追加したい

index.html

<script src="js/vendor/parsley.message.th.js"></script>
<script src="js/vendor/parsley.extend.min.js"></script>
<script src="js/vendor/parsley.min.js"></script>

...

<div class="control-group">
    <label class="control-label" for="A0_C1">From<i class="required-icon"></i></label>
    <div class="controls">
        <input type="text" id="A0_C1" name="A0_C1" value="" required="required" />
        <span class="help-inline"></span>
    </div>
</div>

parsley.message.th.js

window.ParsleyConfig = $.extend( true, {}, window.ParsleyConfig, { 
    errors: {
        container: function ( elem ) {
            return $(elem).parent().find(".help-inline");
        }
    }
});

PDATE-v1.1.9-devで動作するソリューション

return $(elem).closest('.controls').find('.help-inline').append(template);
1
GiVeR

ClassHandler関数を定義するだけですParsleyライブラリのインポート前私の場合はbootstrapを使用しており、親divにエラーと有効なクラスを適用します（「フォーム-group "クラス）。

<script>
    window.ParsleyConfig = {
      classHandler: function ( parsleyField) {
      // specify where parsley error-success classes will be set
      return parsleyField.$element.parent();
      // Change this to change the element to apply too
      },
    };
</script>

次に、データパセリ検証をフォームタグに追加します。

<form  method="post" id="form1" data-parsley-validate>

ブートストラップを使用する場合は、bootstrapエラーと有効なクラスも指定する必要があります

<form method="post" id="form1" data-parsley-error-class="has-error" data-parsley-success-class="has-success" data-parsley-validate>

無効/エラー状態の親divに設定された「has-error」クラスを取得するには（有効の場合も同じ）：

<div class="form-group has-error">
    <label>Name</label>
    <input class="form-control" type="text" id="name" name="name" required="" data-parsley-trigger="keyup" data-parsley-minlength="5">
    <p class="help-block">Example help text here.</p>
</div>

このソリューションは、すべての分野にグローバルです。

1
Cherif KAOUA