jquery blur not working/triggering

Question

I don't know much about jquery and javascript. This is my code for input text where i want to use blur to validate the field

  <div class="form-row form-input-name-row" >

                <label>
                    <span>Full name</span>
                    <input id="txt_name" type="text" name="name">
                </label>

                <!--
                    Add these three elements to every form row. They will be shown by the
                    .form-valid-data and .form-invalid-data classes (see the JS for an example).
                -->

                <span class="form-valid-data-sign"><i class="fa fa-check"></i></span>

                <span class="form-invalid-data-sign"><i class="fa fa-close"></i></span>
                <span class="form-invalid-data-info"></span>

            </div>  

this is my javascript code where i have added the blur function

<script type="text/javascript">


    $(document).ready(function() {

        // Here is how to show an error message next to a form field
 $("#txt_name").blur(function() {

        var errorField = $('.form-input-name-row');

        // Adding the form-invalid-data class will show
        // the error message and the red x for that field

        errorField.addClass('form-invalid-data');
        errorField.find('.form-invalid-data-info').text('Please enter your name');

});​
        // Here is how to mark a field with a green check mark

        var successField = $('.form-input-email-row');

        successField.addClass('form-valid-data');



    });
     $(".clicker").click(function(){
    $(".file").click();
});



function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}



</script>  

I am also using bootstrap, can somebody tell why blur is not firing?

Answer 1

The blur event is being fired. Here is your code with alert() in the blur callback.

PS. Just a quick note. blur is fired when you focus and then "focus-out".

 $(document).ready(function() { // Here is how to show an error message next to a form field $("#txt_name").blur(function() { alert('Blur event fired!'); // < === HERE === var errorField = $('.form-input-name-row'); // Adding the form-invalid-data class will show // the error message and the red x for that field errorField.addClass('form-invalid-data'); errorField.find('.form-invalid-data-info').text('Please enter your name'); }); // Here is how to mark a field with a green check mark var successField = $('.form-input-email-row'); successField.addClass('form-valid-data'); }); $(".clicker").click(function() { $(".file").click(); }); function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#blah').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-row form-input-name-row"> <label> <span>Full name</span> <input id="txt_name" type="text" name="name"> </label> <!-- Add these three elements to every form row. They will be shown by the .form-valid-data and .form-invalid-data classes (see the JS for an example). --> <span class="form-valid-data-sign"><i class="fa fa-check"></i></span> <span class="form-invalid-data-sign"><i class="fa fa-close"></i></span> <span class="form-invalid-data-info"></span> </div> 

Answer 2

 errorField.addClass('form-invalid-data');
        errorField.find('.form-invalid-data-info').text('Please enter your name');

});​

Try with this code,hope it will work ,ommiting semicolon ";"

 errorField.addClass('form-invalid-data');
        errorField.find('.form-invalid-data-info').text('Please enter your name');

})

Answer 3

https://jsfiddle.net/ra3bbtow/

});​ // Here is how to mark a field with a green check mark

There is a red dot, that's a character which was not showing in my ide. Thanks to @MedetAhmetsonAtabayev