HTML5/JS/jQuery：入力が無効で、異なる（任意の）要素に無効なマークを付ける

Question

標準の新しいパスワードフォームを作成しようとしていますが、新しいパスワードを1回入力してからもう一度入力してください。

1. ユーザーは#newpassword1にパスワードabcを入力：あなたは離れてこれらのフィールドからぼかす一度ように一致していない場合、私は両方のは、次のシナリオのように、無効とマークされます、それをしたいと思います。
2. ユーザータブを#newpassword2に変更してください。
3. パスワードdefを#newpassword2に入力します。
4. ユーザータブを離れてください。
5. 検証で不一致が検出され、#newpassword1と#newpassword2の両方が無効としてマークされます。

私はe.target.setCustomValidity(...)を使用することにより無効と私はイベントのターゲットをマークすることができることを知って、私は非常によくするJavaScriptのイベントモデルを理解していないと無効と異なる要素をマークする方法を見つけ出すことはできませんイベントターゲット自身の無効に基づいて決定する。

これは私が使用しようとしています（非稼働）コードの関連の抜粋です。

if ($('#newpassword1').val() != $('#newpassword2').val()) { 
    errorMessage = "The new passwords you've entered don't match."; 

    $('#newpassword1, #newpassword2').setCustomValidity(errorMessage); 
} 

それが動作するはずのようにこれは直感的に、そうですが、もちろんそれはしていません。エラーは単にTypeError: $(...).setCustomValidity is not a functionです。

ご注意：私は、フィールドに赤いリングか何かを追加する方法を求めて、私はそれが実際には（のように、そのvalidity.validプロパティリターンfalseを持っている）無効になりたいわけではありません。

これは可能ですか？

ありがとうございます！

Answer 1

次のコードを試してください。 jQueryは選択されたオブジェクトの配列を返し、ネイティブ入力要素ではなく、jqueryオブジェクトではsetCustomValidityがサポートされているため、そのエラーが発生しています。

$('#newpassword1, #newpassword2').each(function() { 
    this.setCustomValidity(errorMessage) 
}); 

Answer 2

<div class="cabinet_settings_header cabinet_header">Список регионов работы для выбора</div>    
      <div class="registration_region_select checkbox-group required"> 
       <?for($i = 0; $i < sizeof($regions); $i++):?>      
        <label for="region_id_<?=$regions[$i]['region_id']?>"> 
         <input type="checkbox" name="region_id[]" value="<?=$regions[$i]['region_id']?>" id="region_id_<?=$regions[$i]['region_id']?>" /> 
         <?=$regions[$i]['name']?> 
        </label> 
       <?endfor;?> 
      </div> 

<div class="cabinet_settings_header cabinet_header">Проверка выбора регионов работы (разрешмет отправку формы, если минимум 1 выбран)</div>    

     $('.checkbox-group.required input').on('change', function(){ 
      checkRegions(); 
     }); 


     function checkRegions(){ 

      checked_counter = $('.checkbox-group.required :checkbox:checked').length;    

      if(checked_counter > 0){ 
       $('.checkbox-group.required #region_id_2')[0].setCustomValidity(''); 

      }else{ 
       $('.checkbox-group.required #region_id_2')[0].setCustomValidity('Выберите хотябы 1 из вариантов'); 
      } 
     } 

$(document).ready(function() { 

      checkRegions(); 


      $("form").submit(function(event){ 
        if($('.checkbox-group.required :checkbox:checked').length <= 0){       
         $('.checkbox-group.required #region_id_2').focus(); 
         event.preventDefault(); 

        } 


      }) 


     }); 

私は `setCustomValidity`は、ネイティブHTMLオブジェクトに対して使用されなければならないと信じている