Question

I really can’t explain this one properly, so here’s a screenshot:

How do I capture the event when this red highlight appears around an email field on firefox. So that I could perform something. The code below is a just a pseudo code mixed with some formal code:

 <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"/>

the email attribute only accepts email attributes, and when you input something else, its automatically highlighted with red border. How do I go about capturing that event so that I could do a custom action instead of the red-highlight which is the default.

Answer 1

I think probably what you want to use is blur, such that when the user leaves a given input field, you can perform validation of that field and flag it as invalid if needed. For instance:

$("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");
    }
});

Which gives you something like this: http://jsfiddle.net/CJ5Zc/1/