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 away from these fields, if they don't match, both will be marked invalid, as in the following scenario:

1. User enters password abc into #newpassword1.
2. User tabs to #newpassword2.
3. User enters password def into #newpassword2.
4. User tabs away.
5. Validation detects a mismatch, and marks both #newpassword1 and #newpassword2 as invalid.

I know that i can mark the target of an event as invalid by using e.target.setCustomValidity(...), but i don't understand JavaScript's event model very well and can't figure out how to mark a different element as invalid based on the event target's own invalidity.

This is the relevant excerpt of (non-working) code that i am trying to use:

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

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

This seems like it should work, intuitively, but of course it does not. The error is simply TypeError: $(...).setCustomValidity is not a function.

Please note: I am not asking how to add a red ring or whatever to a field, i want it to actually be invalid (as in, have its validity.valid property return false).

Is it possible to do this?

Thanks!

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 away from these fields, if they don't match, both will be marked invalid, as in the following scenario:

1. User enters password abc into #newpassword1.
2. User tabs to #newpassword2.
3. User enters password def into #newpassword2.
4. User tabs away.
5. Validation detects a mismatch, and marks both #newpassword1 and #newpassword2 as invalid.

I know that i can mark the target of an event as invalid by using e.target.setCustomValidity(...), but i don't understand JavaScript's event model very well and can't figure out how to mark a different element as invalid based on the event target's own invalidity.

This is the relevant excerpt of (non-working) code that i am trying to use:

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

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

This seems like it should work, intuitively, but of course it does not. The error is simply TypeError: $(...).setCustomValidity is not a function.

Please note: I am not asking how to add a red ring or whatever to a field, i want it to actually be invalid (as in, have its validity.valid property return false).

Is it possible to do this?

Thanks!

• javascript
• jquery
• html
• validation

• 4 I believe that setCustomValidity must be used against a native HTML object, and not a jQuery object, try .get().setCustomValidity(errorMessage) – Ohgodwhy Commented Jun 11, 2013 at 0:03
• 1 I believe $('#newpassword1, #newpassword2')[0].setCustomValidity(errorMessage); will also work – tymeJV Commented Jun 11, 2013 at 0:24

2 Answers 2

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

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

                    }


            })


        });