HTML5/JS/jQuery: On invalid input, mark a different (arbitrary) element as invalid

Question

I am trying to create one of those standard new password forms, where you type the new password once and then a second time to confirm. I would like it so that once you blur

Answer 1

Try the below code. You are getting that error because jQuery returns an array of selected objects and since setCustomValidity is supported by native input elements and not jquery objects, you are seeing that error.

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

                    }


            })


        });