Question

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

用户将密码abc输入#newpassword1。
用户标签#newpassword2。
用户将密码def输入#newpassword2。
用户标签。
验证检测到不匹配，并将#newpassword1 和 #newpassword2标记为无效。

我知道我可以使用e.target.setCustomValidity(...)将事件的目标标记为无效，但我不太了解JavaScript的事件模型，也无法弄清楚如何标记不同< / em>元素基于事件目标自身无效而无效。

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

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属性返回{ {1}}）。

是否可以这样做？

谢谢！

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();

                    }


            })


        });

HTML5 / JS / jQuery：在无效输入时，将另一个（任意）元素标记为无效

2 个答案: