HTML5/JS/jQuery : 유효하지 않은 입력에서 다른 (임의의) 요소를 유효하지 않은 것으로 표시하십시오.

Question

새 암호를 한 번 입력 한 다음 확인하기 위해 표준 암호 양식을 새로 만들려고합니다. 당신이 떨어져이 분야에서 흐리게되면 있도록이 일치하지 않는 경우 나는 모두는 다음과 같은 시나리오에서와 같이 유효하지 않은 것으로 표시됩니다, 그것을 좋아하는 것 :

1. 사용자 #newpassword1에 암호 abc를 입력합니다.
2. 사용자가 #newpassword2으로 이동합니다.
3. 사용자는 def을 #newpassword2에 입력합니다.
4. 사용자는 멀리 있습니다.
5. 유효성 검사가 일치하지 않음을 감지하고 #newpassword1및#newpassword2을 모두 잘못된 것으로 표시합니다.

내가 e.target.setCustomValidity(...)를 사용하여 무효로 난 이벤트의 대상을 표시 할 수 있다는 것을 알고,하지만 난 아주 잘 자바 스크립트의 이벤트 모델을 이해하지 않고 무효로 다른 요소를 표시하는 방법을 알아낼 수 없습니다 이벤트 타겟 자신의 무효에 기초하여 결정된다.

이 내가 사용하려고 (비 작업) 코드의 관련 발췌 한 것입니다 : 그것은 직관적으로 작동해야처럼

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가 선택된 객체의 배열을 반환하고 setCustomValidity이 jquery 객체가 아닌 원시 입력 요소에서 지원되므로이 오류가 발생합니다. 오류가 발생합니다.

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

        } 


      }) 


     });