6

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

  1. abc用户输入密码#newpassword1。
  2. 用户选项卡到#newpassword2.
  3. def用户输入密码#newpassword2。
  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）。

是否有可能做到这一点？

谢谢！

4

2 回答 2

10

试试下面的代码。您收到该错误是因为 jQuery 返回了一个选定对象的数组，并且由于setCustomValidity本机输入元素而不是 jquery 对象支持，您会看到该错误。

$('#newpassword1, #newpassword2').each(function() {
    this.setCustomValidity(errorMessage)
});
于 2013-06-11T00:16:58.807 回答
0 
<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();

                    }


            })


        });
于 2017-05-15T07:49:55.487 回答