HTML5/JS/jQuery：在输入无效时，将不同的（任意）元素标记为无效

Question

我正在尝试创建一种标准的新密码表单，您可以在其中输入一次新密码，然后再输入一次以确认。我希望一旦你模糊了这些字段，如果它们不匹配，both 将被标记为无效，如下所示：

1. 用户在#newpassword1中输入密码abc。
2. #newpassword2 的用户标签。
3. 用户在#newpassword2中输入密码def。
4. 用户标签离开。
5. 验证检测到不匹配，并将#newpassword1 和 #newpassword2 标记为无效。

我知道我可以使用e.target.setCustomValidity(...) 将事件的目标标记为无效，但我不太了解 JavaScript 的事件模型，不知道如何标记一个不同的 根据事件目标自身的无效性，元素无效。

这是我尝试使用的（非工作）代码的相关摘录：

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 返回了一个选定对象的数组，并且由于本机输入元素而不是 jquery 对象支持 setCustomValidity，因此您会看到该错误。

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

                    }


            })


        });