HTML5/JS/jQuery: Geçersiz girişte, farklı (isteğe bağlı) bir unsuru geçersiz olarak işaretleyin

Question

Bu yeni şifreleme formlarından birini oluşturmaya çalışıyorum; burada yeni parolayı bir kez yazıp onaylamak için ikinci kez yazabilirsiniz. Uzakta bu alanlardan bulanıklık kez, böylece uymuyorsa ben hem aşağıdaki senaryoda olduğu gibi, geçersiz olarak işaretlenir, bunu istiyorum:

1. Kullanıcı #newpassword1 içine şifresini abc girer.
2. Kullanıcı sekmeleri #newpassword2.
3. Kullanıcı, numaralı şifreyi #newpassword2 içine girer.
4. Kullanıcı sekmeleri uzağa.
5. Doğrulama, bir uyumsuzluğu algılar ve her ikisi de #newpassword1ve#newpassword2 değerlerini geçersiz olarak işaretler.

Ben e.target.setCustomValidity(...) kullanarak geçersiz olarak ben bir olayın hedefi işaretleyebilirsiniz biliyorum, ama ben çok iyi JavaScript'in olay modelini anlamıyorum ve geçersiz olarak farklı elemanı işaretlemek anlamaya olamaz Etkinlik hedefinin kendi geçersizliğine göre.

Bu i kullanmaya çalışıyorum (çalışma dışı) kod ilgili alıntıdır: Bu sezgisel, çalışması gerekir gibi

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

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

Bu gibi görünüyor, ama tabii öyle değil. Hata sadece TypeError: $(...).setCustomValidity is not a function.

unutmayın: Bir alana bir kırmızı halkayı ya da her türlü nasıl ekleneceğini sormuyorum, ben (kendi validity.valid mülkiyet dönüşünü false sahip olduğu gibi) aslında geçersiz olmak istiyorum.

bunu yapmak mümkün mü?

Teşekkürler!

Answer 1

Aşağıdaki kodu deneyin. JQuery seçili nesneler dizisini döndürdüğü ve setCustomValidity yerel girdi öğeleri tarafından desteklendiğinden ve jquery nesneleri tarafından desteklenmediğinden bu hatayı alıyorsunuz, bu hatayı görüyorsunuz.

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

        } 


      }) 


     });