ウェブページに詳細なメッセージの代わりにカスタムメッセージを表示

Question

以下のhtmlコードでは数字だけを入力として受け付けますが、数字を入力してバックスペースを入力して文字を入力すると、ランダムに入力を受け付けますそれは手紙を受け入れています。

<input type="number" class="form-control" name="digitalId" ng-model="data.digitalId" placeholder="digits can only be entered"> </div> 

ユーザーがフォームを送信すると、上記のフィールド値は、列が整数型のデータベースに格納されます。しかし、文字を受け入れてフォームが送信されると、エラーメッセージが画面に表示されますが、メッセージはDTOオブジェクトとプロパティタイプについての詳細なメッセージです。ユーザーがフォームを送信し、そのフィールドにいくつかの文字がある場合、カスタムメッセージを「Only numbers are allowed」として表示したい。どんな提案も役に立ちます。

Answer 1

これは、それが

function validate(evt) { 
 
    var theEvent = evt || window.event; 
 
    var key = theEvent.keyCode || theEvent.which; 
 
    key = String.fromCharCode(key); 
 
    var regex = /[0-9]|\./; 
 
    if(!regex.test(key)) { 
 
    theEvent.returnValue = false; 
 
    if(theEvent.preventDefault) { 
 
    console.log("only numbers allowed"); 
 
    theEvent.preventDefault(); 
 
    } 
 
    
 
    } 
 
}

<input type="number" class="form-control" name="digitalId" ng-model="data.digitalId" placeholder="digits can only be entered" onkeypress="validate(event)"> </div>

A reference from this answer: jQueryの使用なしで同様の角度で使用することができるように、ベース純粋ジャバスクリプトであります