[英]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.