jquery：验证后隐藏错误消息

Question

我是新来的jquery。我想在条目不是数字时显示错误消息。这里的问题是，当用户删除输入并正确写入一个数字时，错误信息仍然会出现。 我该如何解决这个问题？

$("#SpecCode").mousedown(function() { 
    specialismCode=$(this).val(); 
    if (!$.isNumeric(specialismCode) || specialismCode.length !=''){ 
     $("#SpecCode").parent().after('<span class="validation">Please enter correct input</span>'); 
     } 

     }); 

Answer 1

答案更新

如果需要显示/隐藏验证消息，你可以直接将它添加到HTML片段，并使用.toggle(true/false)。

$("#SpecCode").on('input', function(e) { 
 
    var specialismCode = $(this).val(); 
 
    var nextele = $(this).next('span'); 
 
    nextele.toggle(!$.isNumeric(specialismCode) || specialismCode.length == 0); 
 
}).trigger('input');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<form> 
 
    <label for="SpecCode">Number: 
 
     <input type="text" id="SpecCode"><span class="validation">Please enter correct input</span> 
 
    </label> 
 
</form>

你在你的代码中的一些问题。

相反的：

specialismCode.length !='' 

你可以使用：

specialismCode.length == 0 

而不是鼠标按下可以使用输入。

最后，错误消息出现在输入字段之后。因此，您可以使用：

$(this).next('span') 

为了选择错误消息。

的片段：

$("#SpecCode").on('input', function(e) { 
 
    var specialismCode = $(this).val(); 
 
    var nextele = $(this).next('span'); 
 
    if (!$.isNumeric(specialismCode) || specialismCode.length == 0) { 
 
     $(this).after(function(idx, txt) { 
 
      return (nextele.length == 0) ? '<span class="validation">Please enter correct input</span>' : ''; 
 
     }); 
 
    } else { 
 
     nextele.remove(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <label for="SpecCode">Number: 
 
     <input type="text" id="SpecCode"> 
 
    </label> 
 
</form>