Question

我希望在将预订参考字段留空时显示错误消息。但是，当我使用keyup change函数时，输出字段不会显示错误消息而是消失。我需要使用此函数，我需要包含添加和删除类。不确定有什么问题。

＆＃13;

$(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');
    }
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

一个简单的解决方案是考虑你实际在做什么。

$("#ref").addClass("errorMsg");在此处，您将一个类添加到ID为ref的元素中。您要做的是根据输入值显示或隐藏包含错误消息的span元素。您希望在事件键盘上触发并更改。

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

以下是您的解决方案：

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

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

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

Jquery错误消息未显示

5 个答案: