HTML5/JS/jQuery: Trên đầu vào không hợp lệ, hãy đánh dấu phần tử khác (tùy ý) là không hợp lệ

Question

Tôi đang cố gắng tạo một trong các biểu mẫu mật khẩu mới chuẩn, nơi bạn nhập mật khẩu mới một lần và sau đó lần thứ hai để xác nhận. Tôi muốn nó để khi bạn làm mờ đi từ các trường này, nếu họ không phù hợp, cả sẽ được đánh dấu không hợp lệ, như trong các tình huống sau:

1. dùng nhập mật khẩu abc vào #newpassword1.
2. Tab người dùng là #newpassword2.
3. Người dùng nhập mật khẩu def vào #newpassword2.
4. Tab người dùng.
5. Xác thực phát hiện sự không khớp và đánh dấu cả hai #newpassword1và#newpassword2 là không hợp lệ.

tôi biết rằng tôi có thể đánh dấu các mục tiêu của một sự kiện như không hợp lệ bằng cách sử dụng e.target.setCustomValidity(...), nhưng tôi không hiểu mô hình sự kiện JavaScript của rất tốt và không thể tìm ra cách để đánh dấu một khác nhau yếu tố là không hợp lệ dựa trên mức độ không hợp lệ của mục tiêu sự kiện.

Đây là đoạn trích có liên quan của mã (không làm việc) mà tôi đang cố gắng sử dụng:

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

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

Điều này có vẻ như nó nên làm việc, bằng trực giác, nhưng tất nhiên nó không. Lỗi chỉ đơn giản là TypeError: $(...).setCustomValidity is not a function.

Xin lưu ý: Tôi không yêu cầu làm thế nào để thêm một chiếc nhẫn màu đỏ hoặc bất cứ điều gì vào một lĩnh vực, tôi muốn nó phải thực sự được không hợp lệ (như trong, có nó trở lại validity.valid tài sản false).

Có thể thực hiện việc này không?

Cảm ơn!

Answer 1

Hãy thử mã bên dưới. Bạn đang nhận được lỗi đó vì jQuery trả về một mảng các đối tượng đã chọn và vì setCustomValidity được hỗ trợ bởi các yếu tố đầu vào gốc và không phải các đối tượng jquery, bạn sẽ thấy lỗi đó.

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

        } 


      }) 


     });