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

ANSWERのUPDATE

あなたは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>