HTMLのrequired属性について

前提・実現したいこと

HTMLのrequired属性を付与した際のエラーメッセージの変更を行ないたいです。
JavaScript,jQueryを用いた方法でも構いません。
どなたかご教授願います。

試したこと

title属性を付けてみました。
以下のURLを参考にしてみました。
https://girliemac.com/blog/2012/12/01/html5-form-validation-jp/

例：<input id="username" type="text" pattern="[a-zA-Z0-9_-]{6,12}" required title="must be alphanumeric in 6-12 chars">

azuapricot

2019/02/01 00:47

ご自身で少しはやってみたけどそれでもできなかったというのならやってみたことを書くといいですね

yoshiaki199712

2019/02/01 00:49

アドバイス、ありがとうございます。記述しておきます。

行動規範の内容に同意します

回答3件

ベストアンサー

あれはブラウザにより仕様が違います。
INPUTのREQUIREDのメッセージの変更方法やFIREFOXの挙動への対応
のような記事もありますがやはりブラウザによる挙動の違いが問題点としてあがっています。

なので、

JavaScript,jQueryを用いた方法でも構いません。

普通にJavaScriptでバリデーションを作られた方が思うとおりの対応が出来るでしょう。

投稿2019/02/01 00:52

m.ts10806

総合スコア80888

yoshiaki199712

2019/02/01 00:56

回答、ありがとうございます。やはり、ブラウザによって違うんですね。 JavaScriptを用いたバリデーションを検討します。情報提供ありがとうございました。

m.ts10806

2019/02/01 01:00

はい。実装されていないブラウザやバージョンを加味すると自前でバリデーションを用意するかバリデーションプラグインを使うのが確実です。もちろんサーバー上で動作させるのでしたらサーバー側でのバリデーションは必須ですが

行動規範の内容に同意します

こちらにもありますがtitle属性に指定すればメッセージを変えられます

投稿2019/02/01 00:48

papinianus

総合スコア12705

yoshiaki199712

2019/02/01 00:54

回答、ありがとうございます。 Chromeで動作確認出来ませんでした。。。情報提供ありがとうございました。

papinianus

2019/02/01 01:05

リンクをご確認いただけてますか？ titleのことが書いてあるすぐ下にある、「フルカスタム仕様には、ちょっとだけ DOM スクリプティング」をページ内検索してください。コード例もjsfiddle上での動くサンプルもあります。これで不満なら、それは「私のためにコードを書いてください」でしかないです。そしてそうするためには、前提となるコードがなさすぎる

行動規範の内容に同意します

構造とのカラミがでてきますが

javascript
1<script>
2$(function(){
3  var func=function(x){
4    $(x).next('.err').text($(x).val()==""?"必須":"");
5  }
6  $('[required]').on('blur',function(){
7    func(this);
8  });
9  $('form:has([required]) :submit').on('click',function(e){
10    $(this).closest('form').find('[required]').each(function(){
11      func(this);
12    });
13  });
14});
15</script>
16<form>
17<input type="text" name="a" required><span class="err"></span><br>
18<input type="text" name="b" required><span class="err"></span><br>
19<input type="text" name="c" ><br>
20<input type="submit" value="go">
21</form>