繁体   English   中英

jQuery的模糊不工作/触发

[英]jquery blur not working/triggering

我对jquery和javascript不太了解。 这是我输入文本的代码,我想使用模糊来验证字段

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

这是我的JavaScript代码,其中添加了模糊功能

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

我也在使用引导程序,有人可以说出为什么不触发模糊吗?

blur事件被触发。 这是模糊回调中带有alert()代码。

PS。 只是一个简短的说明。 当您focus然后“聚焦”时会产生blur

 $(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> 

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

});​

尝试使用此代码,希望它将起作用,省略分号“;”

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

})

https://jsfiddle.net/ra3bbtow/

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

有一个红点,那个字符在我的想法中没有显示。 感谢@MedetAhmetsonAtabayev

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM