web-dev-qa-db-ja.com

github.com/1000hz/bootstrap-validatorのカスタムバリデーターの使用方法

ドキュメントから http://1000hz.github.io/bootstrap-validator/ ：

実行するカスタムバリデーターを追加します。バリデーターは、引数としてjQuery要素を受け取り、入力の有効性に基づいて真または偽の値を返す関数である必要があります。

オブジェクト構造は次のとおりです。{foo: function($el) { return true || false } }

バリデーターを入力に追加することは、他のdata-foo="bar"と同じように行われます。

また、errorsオプションを使用して、カスタムバリデーターのデフォルトのエラーメッセージを追加する必要があります。

独自のカスタムバリデーターを定義する方法と、このプラグインでそれを使用する方法をよく理解していません。

誰かが私に簡単な例やヒントを教えてもらえますか？

javascriptpluginscustom-validators
9
leo

customオプションはデータ属性では機能しないため、プラグインを手動で呼び出す必要があります。

$().validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    }
})

次に、次のように使用します。

<input placeholder="plz enter odd value" data-odd>

エラーメッセージを追加することを忘れないでください コードを参照

12
julesbou

ここでもう少し詳しく答えを具体化したいと思いました。

Data-apiを使用しているときにこれを実行しようとしました（formタグにdata-toggle="validator"を入力）。それを<form>タグから削除し、Javascriptで有効にすると、カスタム関数が機能します。

$('#sign-up_area').validator({
    custom: {
        'odd': function($el) { return Boolean($el.val() % 2);}
    },
    errors: {
        odd: "That's not an odd number!"
    }
});

また、次のようにdata-odd属性に値を追加する必要がありました。

<div class="row">
    <div class="form-group col-xs-12 col-md-12">
        <label class="control-label" for="test">Odd/Even:</label>
        <input type="text" name="test" id="test" class="form-control" placeholder="Enter an odd integer" data-odd="odd" >
        <span class="help-block with-errors"></span>
    </div>
</div>

興味深いことに、<input>要素に以下を追加すると、javascriptで宣言されたエラーメッセージよりも優先されます。

data-odd-error="Not an odd number, yo!"

ただし、data-odd-error属性のみを使用し、Javascriptでエラーメッセージが指定されていない場合、コンソールでエラーが発生します。したがって、必須 Javascriptでエラーメッセージを宣言します。

6
Chris Brewer

まず、独自のカスタムバリデーターを追加します。次に例を示します。

var validatorOptions = {
        delay: 100,
        custom: {
            unique: function ($el) {
                var newDevice = $el.val().trim();
                return isUniqueDevice(newDevice)
            }
        },
        errors: {
            unique: "This Device is already exist"
        }
    }

次に、カスタムバリデーターのフォーム入力を「バインド」する必要があります。次に例を示します。

<input id="add_new_device_input"  class="form-control"  data-unique="unique">

この入力にさらにバリデーターエラーを追加する場合は、カスタムエラーを入力に追加する必要があります。data-unique-error= "このデバイスは既に存在します"例：

<input id="add_new_device_input"  class="form-control"  data-unique="unique" data-unique-error="This device is already exist" data-error="The Device pattern is invalid" pattern="<Add some regex pattern here>">

「data-error」はデフォルトのバリデーターエラーであり、「ネイティブ」キーと呼ばれます。次のコードは、バリデーターがバリデーターキーに従ってエラーメッセージを出力する方法を示しています。

   function getErrorMessage(key) {
  return $el.data(key + '-error')
    || $el.data('error')
    || key == 'native' && $el[0].validationMessage
    || options.errors[key]
}
2
omrim