jQuery Custom Method Validateカスタムメソッドが表示されないメッセージ

Question

必要なフィールドが空のときに赤い枠線を追加したいので、「require」というcutom jQueryバリデータメソッドを作成しました。このメソッドは赤い枠線を正常に追加しましたが、エラーメッセージは表示されませんでした。私は何を間違えたのですか？

ファーストネーム入力制御

<input type="text" name="firstName" class="form-control" id="fName" placeholder="First Name" /> 

jQueryのカスタム検証方法。

jQuery.validator.addMethod("require", function (value, element, params) { 
    var valid = false; 
    if (!value) { 
     $(element).addClass('invalid'); 
    } else { 
     $(element).removeClass('invalid'); 
     valid = true; 
    } 
    return this.optional(element) || valid; 
}, "Required field"); 

バリデータルール

$('#newUsers').validate({ 
     rules: { 
      firstName: { 
       // required : true, 
       maxlength: 50, 
       require : '#firstName' 
      }, 
      messages: { 
      firstName: { 
     //required: 'First name is required.' 
       maxlength: 'First name cannot have more 50 letters', 
       require: 'First name is required.' 
      } 
    } 

Answer 1

私は必須フィールドが空の場合にも赤い枠を追加したいので、「必要」と呼ばcutom jQueryのバリデータメソッドを作成しました。

あなたは、する必要はありませんし、ない、単純に赤い境界線を追加する全く新しいrequiredルールを記述する必要があります！これをしてしまえば、基本的にはプラグインのデフォルト機能のほとんどを無効にしてしまいます.1つのルールだけを対象にしたカスタムスタイリングはありません。

• CSSを使用して、errorクラスを適切にスタイルすることができます。 DEMO 1：jsfiddle.net/L61xec5x/

OR

• あなたはinvalidにデフォルトのエラー・クラスを変更するerrorClassオプションを使用することができます。 DEMO 2：jsfiddle.net/L61xec5x/1

---

方法が正常に赤い枠を追加しましたが、それはエラーメッセージが表示されませんでした。私は何を間違えたのですか？

カスタムメソッドは、このラインを持っている...

return this.optional(element) || valid; 

this.optional(element) ||部分は、ルールは常にオプションであることを保証します。言い換えれば、フィールドが空のままになるたびにこのルールを完全に無視すると言います。 requireルールにはこれを使用できません。これは、空欄になるとオプションの場合はフィールドを必須にすることができないためです。

DEMO 3：jsfiddle.net/L61xec5x/4/

あなたのコードが動作しなかった理由私はどのように/あなたを示しています。スタイリングを変更する好ましい方法は、CSSおよび/または既にプラグインに組み込まれているメソッドを使用することです。ここで

Answer 2

はあなたの例のコードで作業フィドルです：https://jsfiddle.net/dreysolano/nnfp5h8j/

別にあなた.validate()オプションを持ついくつかの可能な構文上の問題から、単純にカスタムrequire方法ではなく、this.optional(element) || validからvalidを返すことはトリックを行うようです。