HTML5/JS/jQuery: in caso di input non valido, contrassegna un elemento diverso (arbitrario) come non valido

Question

Sto tentando di creare uno di quei moduli di nuova password standard, in cui digiti la nuova password una volta e poi una seconda volta per confermare. Vorrei in modo che una volta che si sfocatura lontano da questi campi, se non corrispondono, sia saranno contrassegnati non validi, come nel seguente scenario:

1. L'utente inserisce la password abc in #newpassword1.
2. Schede utente su #newpassword2.
3. L'utente immette la password def in #newpassword2.
4. Schede utente assenti.
5. La convalida rileva una mancata corrispondenza e contrassegna entrambi i valori #newpassword1e#newpassword2 come non validi.

So che posso segnare il bersaglio di un evento come non validi utilizzando e.target.setCustomValidity(...), ma non capisco modello di eventi di JavaScript molto bene e non riesco a capire come contrassegnare un diverso elementocome non valido in base alla propria invalidità del target dell'evento.

Questo è il relativo estratto di codice (non funzionante) che sto cercando di utilizzare:

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

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

Questo sembra che dovrebbe funzionare, in modo intuitivo, ma ovviamente non è così. L'errore è semplicemente TypeError: $(...).setCustomValidity is not a function.

Si prega di notare: Non sto chiedendo come aggiungere un anello rosso o qualsiasi altra cosa a un campo, voglio che in realtà essere validi (come in, avere il suo ritorno validity.valid proprietà false).

È possibile farlo?

Grazie!

Answer 1

Prova il codice qui sotto. Stai ricevendo quell'errore perché jQuery restituisce una matrice di oggetti selezionati e poiché setCustomValidity è supportato da elementi di input nativi e non da oggetti jquery, stai vedendo quell'errore.

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

        } 


      }) 


     });