バリケーションチェック

Question

前提・実現したいこと

バリケーションチェックで、条件にあった回答をした場合、エラーの文字を消したい。

発生している問題・エラーメッセージ

バリケーションチェックについてなのですが、条件にあった回答をした場合、
エラーの文字を消したいのですが消えません。
全角以外の表示の場合は、エラーとでて正しく機能しているのですが、全角入力でも同様の表示になります。

エラーメッセージ

該当のソースコード

 html  jQuery 
ソースコード

<form action="" method="post" id="my-form"> <div class="box-left"> <p>お名前</p> </div> <div class="box-right"> <div class="box-red"><span>必須</span></div> <input type="text" name="text" placeholder=" 例）山田花子" class="box-white text0" style="font-size: 30px;"> <p class="output"></p> </div> <div id="btn-bottom"> <input type="submit"value="注文する▼" id="btn-btn"> </div> </form>

//jQuery
$('#my-form').on('submit', function(e){
let text1 = $('.text1').val();

if(text1.match(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/)){
e.preventDefault();
$('.output').text('全角で入力してください');

}

}

試したこと

全角以外の表示の場合は、if文で表示。

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

エラーの文字を消したいのですが消えません。

チェック前に消してからチェックするようにしては。

$('#my-form').on('submit', function(e){
    $('.output').text('');
    let text1 = $('.text1').val(); 

あと、submitイベント取ってからチェックするなら
e.preventDefault();はイベント発火直後にされたほうが良いと思います。
項目が増えたときにチェック分岐毎に書くことになります。
バリデーションOKだったときにform.submit()は最後に書かないといけませんが、
随所にpreventDefault入れるよりはマシかもしれません。

Answer 2

解決できました！
お答えいただきありがとうございます。

Comments

[YT0014]

ここは回答欄なので、感謝などは、各々の回答のコメントなどに記述してください。
また、この回答に関しては、削除依頼をされることをお勧めします。

Answer 3

「^」の位置をとかですかね

if(text1.match(/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/)){
↓
if(text1.match(/[^a-zA-Z0-9!-/:-@¥[-`{-~]*$/)){

参考サイト

余談ですが、「バリケーション」ではなく「バリデーション(Validation)」です^^