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>