[英]jquery blur not working/triggering
I don't know much about jquery and javascript. 我对jquery和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 这是我的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>
I am also using bootstrap, can somebody tell why blur is not firing? 我也在使用引导程序,有人可以说出为什么不触发模糊吗?
The blur
event is being fired. blur
事件被触发。 Here is your code with alert()
in the blur callback. 这是模糊回调中带有
alert()
代码。
PS. PS。 Just a quick note.
只是一个简短的说明。
blur
is fired when you focus
and then "focus-out". 当您
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');
});
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');
})
https://jsfiddle.net/ra3bbtow/ 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
感谢@MedetAhmetsonAtabayev
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.