jquery blur不工作/触发

jquery blur not working/triggering

本文关键字：触发 工作 blur jquery      更新时间：2023-09-26

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

我也在使用bootstrap，有人能说出为什么blur没有启动吗？

正在触发blur事件。这是您在blur回调中使用alert()的代码。

PS。只是一个简短的提示。blur在focus然后"聚焦"时被激发。

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

相关文章：