HTML5/JS/jQuery: Bei ungültiger Eingabe, markieren Sie ein anderes (beliebiges) Element als ungültig

Question

Ich versuche, eines dieser neuen Standard-Passwort Formen zu erstellen, wo Sie das neue Passwort einmal eingeben und dann ein zweites Mal zu bestätigen. Ich möchte es so, dass wenn Sie aus diesen Bereichen verschwimmen weg, wenn sie nicht übereinstimmen, beide wird als ungültig markiert werden, wie in dem folgenden Szenario:

1. Benutzer gibt Passwort abc in #newpassword1.
2. Benutzerregisterkarten zu #newpassword2.
3. Der Benutzer gibt das Passwort def in ein.
4. Benutzerregisterkarten entfernt.
5. Die Überprüfung erkennt eine Nichtübereinstimmung und markiert sowohl #newpassword1als auch als ungültig.

Ich weiß, dass ich das Ziel eines Ereignisses durch Verwendung e.target.setCustomValidity(...) als ungültig markieren können, aber ich verstehe nicht von JavaScript-Event-Modell sehr gut und kann nicht herausfinden, wie man ein verschiedenes Element als ungültig markieren basierend auf der eigenen Invalidität des Ereignisziels.

Dies ist der relevante Auszug aus (ohne Funktion) Code, den ich zu verwenden Ich versuche:

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

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

Dies scheint, wie es funktionieren soll, intuitiv, aber natürlich ist es nicht. Der Fehler ist einfach TypeError: $(...).setCustomValidity is not a function.

Bitte beachten Sie: Ich bin nicht zu fragen, wie einen roten Ring oder was auch immer auf ein Feld hinzuzufügen, ich will es eigentlich sein ungültig (wie in, haben seine validity.valid Wohnung zurück false).

Ist es möglich, dies zu tun?

Danke!

Answer 1

Versuchen Sie den folgenden Code. Sie erhalten diesen Fehler, weil jQuery ein Array ausgewählter Objekte zurückgibt, und da setCustomValidity von nativen Eingabeelementen und nicht von jquery-Objekten unterstützt wird, wird dieser Fehler angezeigt.

$('#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(); 

        } 


      }) 


     });