Событие для обязательных атрибутов в jquery

Question

Я действительно не могу объяснить это должным образом, поэтому вот скриншот:

Как мне зафиксировать событие, когда эта красная подсветка появляется вокруг поля электронной почты в Firefox. Чтобы я мог что-то исполнить. Код ниже представляет собой просто псевдокод, смешанный с некоторым формальным кодом:

 <script src="jq.js"></script>
    <script>
    $(function(){

        $('#btn_yo').click(function(){
            $('input').each(function(index){
                if($(this:required == 'true'){
                    //do something
                }
            });
        });
    });
    </script>
    <input type="text" name="name" id="name"  required/>
    <input type="email" name="mail" id="mail"/>
    <input type="button" id="btn_yo" value="submit"/>

атрибут email принимает только атрибуты email, а когда вы вводите что-то еще, он автоматически выделяется красной рамкой. Как мне захватить это событие, чтобы я мог выполнить пользовательское действие вместо красной подсветки, которая используется по умолчанию.

Answer 1

Я думаю, вероятно, что вы хотите использовать это blur , так что когда пользователь покидает данное поле ввода, вы можете выполнить проверку этого поля и пометить его как недействительное, если это необходимо. Например:

$("input").blur(function(evt) {
    if (this.required && this.value == "") {
        alert(this.name + " is a required field!");
        $(this).addClass("error");
        this.focus();
    }
    else {
        $(this).removeClass("error");
    }
});

Что дает вам что-то вроде этого: http://jsfiddle.net/CJ5Zc/1/

Answer 2

$('#mail').focus(function(){

    alert('focused');
});