HTML入力パターンのカスタマイズ検証メッセージが

Question

フィドルエラーが発生します。 https://jsfiddle.net/v45hrqs1/7/

だから、私は有効なファイル名が指定されているかどうかを確認するためにpattern属性を使用してHTMLの小さなフォームを構築します。それが働いているので、filename/のようなものを入力してEnterキーを押すと、「要求形式に一致してください」というメッセージが表示されます。

さらにカスタマイズされたメッセージが必要なので、javascriptの部分を追加しました。今、無効なファイル名を入力してEnterキーを押すと、新しいメッセージが表示されます。

ただし、ファイル名を有効なものに変更すると、エラーメッセージが表示されます。

どうしたのですか？私の考えはファイル名を変更した後です。var inputは更新されません。しかし、私はこれをどのように修正するのか分かりません。

Answer 1

JavaScriptは必ずしも必要ではありません。あなたはこのような入力自体に妥当性チェックを設定することができます。それが変更されたとき、それは再評価されますので

<input type="text" class="form-control" id="packet_name" name="packet_name" pattern="[^\\/:\x22*?<>|]+" oninvalid="setCustomValidity('Invalid character in name:\n \/: * ? < >.')" oninput="setCustomValidity('')" maxlength="100" required> 

そしてoninputは、カスタム有効性をクリアします。