未显示 Jquery 错误消息

Question

我希望在将预订参考字段留空时显示错误消息。但是，当我使用 keyup 更改功能时，输入字段消失了，而不是出现错误消息。我需要使用这个功能，我需要包括添加和删除类。不知道出了什么问题。

$(document).ready(function() {
  $("#ref").on('keyup change', function(event) {
    if ($('#ref').val() == '') {
      $("#ref").addClass("errorMsg");
      $("#search").attr('disabled', 'disabled');
    } else {
      $("#ref").removeClass("errorMsg");
      $("#search").removeAttr('disabled');
    }
  });
});

.errorMsg {
  display: none;
  color: #FEA04D;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number 
     required</span>
  <button type="button" id="search" disabled>Search</button>
</form>

Answer 1

您正在对输入应用 errorMsg 类，这就是它隐藏的原因。您需要像这样切换错误类的显示

$(document).ready(function() {
  $("#ref").on('keyup change', function(event) {
    if ($('#ref').val() == '') {
      $(".errorMsg").css("display", "block");
      $("#search").attr('disabled', 'disabled');
    } else {
      $(".errorMsg").css("display", "none");
      $("#search").removeAttr('disabled');
    }
  });
});

.errorMsg {
  display: none;
  color: #FEA04D;
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form id="reference">
  <label for="ref">Booking Reference</label>
  <br>
  <input type="text" id="ref" name="Booking Reference Number" class="required" placeholder="12"> <span class="errorMsg">Reference number 
     required</span>
  <button type="button" id="search" disabled>Search</button>
</form>

Answer 2

您正在向输入框中添加/删除 errorMsg 类，而不是隐藏/显示具有 errorMsg 类的错误消息

https://jsfiddle.net/eqyy77q7/

 $(document).ready(function() {
$("#ref").on('keyup change', function(event) {
if ($(this).val() == '') {
$(".errorMsg").show();
$(this).addClass("error");
$("#search").attr('disabled','disabled');
} else {
    $(".errorMsg").hide();
    $(this).removeClass("error");
    $("#search").removeAttr('disabled');
}  }) })

Answer 3

这是您的解决方案：

CSS：

.msg{
  display: none;
}
.errorMsg {
display: inline-block;
color: #FEA04D;
font-size:14px;
}

jQuery：

$(document).ready(function() {
  $("#ref").on("blur keyup change", function(event) {
    if ($(this).val() == "") {
      $(this).next().addClass("errorMsg");
      $("#search").attr("disabled", "disabled");
    } else {
      $(this).next().removeClass("errorMsg");
      $("#search").removeAttr("disabled");
    }
  });
});

这是预览链接： https://codepen.io/ziruhel/pen/QObqKq

Answer 4

显示和隐藏错误消息 span 元素的逻辑存在一些错误，而是隐藏了输入。

解决这个问题的一个简单方法是想想你实际在做什么。

$("#ref").addClass("errorMsg"); 在这里，您向 ID 为 ref 的元素添加一个类。您要做的是根据输入值显示或隐藏包含错误消息的 span 元素。您希望在事件 keyup 和 change 时触发它。

$(document).ready(function() {
  $("#ref").on('keyup change', function(event) {
		$('#ref').val().length < 1 ? disableInput() : enableInput();
  });
  
  function enableInput() {
  	$('.errorMsg').hide();
    $("#errorMsg").removeClass('hasError');
    $("#search").removeAttr('disabled');
  }
  
  function disableInput() {
  	$('.errorMsg').show();
    if (!$("#errorMsg").hasClass('hasError')) {
    	$("#errorMsg").addClass('hasError');
    }
    $("#search").attr('disabled','disabled');
  }
});

.errorMsg {
  display:none;
  color: #FEA04D;
  font-size:14px;
}
.errorMsg.hasError {
  display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="reference">
 <label for="ref">Booking Reference</label>
 <br>
 <input type="text" id="ref" name="Booking Reference Number"
 placeholder="12" required>
 <span class="errorMsg hasError">Reference number 
 required</span>
 <button type="button" id="search" disabled>Search</button>
 </form>

Answer 5

这看起来不太好，#ref 没有类 errorMsg。请重做你的课程

$("#ref").removeClass("errorMsg");