HTML5に最小長の検証属性はありますか？

608

フィールドのminlength属性が<input>機能しないようです。

HTML5の他の属性を使用して、フィールドの値の最小長を設定できますか？

html  html5-validation 
— エミラン
ソース
3
すべてのフィールドの答えになるわけではありませんが、値が存在することを確認するだけの場合は、「必須」属性を使用できます。<input type = "text" name = "input1" required = "required" />
— なし
1
— Web_Designer
7
それは存在しませんが、大騒ぎしてそれを取得しましょう！w3.org/Bugs/Public/show_bug.cgi?id=20557
— エリックエリオット
完全な実装を行う場合は、JS / Jqueryを使用する必要があります（必須、最小長、送信時のエラーメッセージなど）。Safariはまだ必須属性も完全にはサポートしていません。ChromeとOperaのみがminLengthをサポートしています。たとえば、caniuse.com
— requiredを

回答:

1326

pattern属性を使用できます。このrequired属性も必要です。それ以外の場合、空の値を持つ入力フィールドは制約の検証から除外されます。

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

「空、または最小の長さ」のパターンを使用するオプションを作成する場合は、次のようにします。

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">
— ユーザー123444555621
ソース
139
jQueryの代わりにhtml5を使用するための+1。title属性を使用すると、パターンが満たされない場合にユーザーに表示するメッセージを設定できることを追加したいと思います。それ以外の場合は、デフォルトのメッセージが表示されます。
— なし
11
@ J.Moneyそれでも「要求されたフォーマットと一致してください：<title>」と表示されます。以前のデフォルトのメッセージをバイパスする方法はありますか？
— CᴴᴀZ
59
残念ながら、これはtextareasではサポートされていません。
— ThiefMaster 2013年
27
@ChaZ @Basjは、次の属性を追加することにより、カスタムエラーメッセージを追加することができますoninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
無効な入力を入力し、を使用している場合はsetCustomValidity、入力を修正した後でもエラーメッセージが引き続き表示されます。onchangeこれに対抗するには、次の方法を使用できます。oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby 2015年
154

そこでminlengthの不動産HTML5仕様になりました、だけでなく、validity.tooShortインターフェースが。

最近のバージョンのすべての最新ブラウザーでは、どちらも有効になっています。詳細については、https：//caniuse.com/#search=minlengthを参照してください。

— RHGB
ソース
1
Firefox 44ですが、まだ実装されていません。
— ChristianLæirbag2016
2
ChromeやOpera以外ではまだサポートされていません。caniuse.com/#search=minlength
— rmcsharry
2017年1月で、ChromeとOperaのみが最小長をサポートしています
— TrojanName
2
@TrojanName Firefoxはバージョン51minlength以降の属性をサポートしています。
— Luca Detomi 2017年
16
このStack Overflow回答のステータスを更新する定期的なコメントは、現在の情報をここで確認するように指示するよりも有用ではありません。caniuse.com
— ＃
19

これはHTML5のみのソリューションです（最小長5、最大長10文字の検証が必要な場合）。

http://jsfiddle.net/xhqsB/102/

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— アリ・チャルクチュオール
ソース
3
フィールドがOKでない場合にカスタムエラーメッセージを設定する方法
— Basj
2
カスタムメッセージtitleの場合、必要なメッセージを含む属性を追加します。
— Shlomi Hassid
8
同じpattern答えが数か月前に出されました。この答えはどうですか？
— Dan Dascalescu、2015
@DanDascalescu彼にはフォームタグがなく、明確な説明がありませんでした。また、動作するjsfiddleデモも含めました。（ところでStackoverflowのルールでは、コミュニティに役立つ限り、同様の回答をすることは禁止されていません）
— AliÇarıkçıoğluJan
より良い答えを与える1つの方法は、実行可能なコードスニペットとしてここにデモをSOに含めることです。
— Dan Dascalescu、
11

はい、あります。それはmaxlengthのようなものです。W3.orgのドキュメント：http : //www.w3.org/TR/html5/forms.html#attr-fe-minlength

minlength機能しない場合はpattern、@ Pumbaa80で言及されているinputタグの属性を使用します。

textareaの場合： 最大の設定用。使用maxlengthし、分のためにこのリンクに行きなさい。

最大と最小の両方がここにあります。

— SohelAhmedM
ソース
8

私はmaxlengthとminlengthを使用して、または使用せずrequiredにHTML5でうまく機能しました。

<input id="passcode" type="password" minlength="8" maxlength="10">
スニペットを展開

`

— benaff033
ソース
6

minLength属性（maxLengthとは異なります）は、HTML5にネイティブには存在しません。ただし、x未満の文字が含まれているフィールドを検証する方法はいくつかあります。

次のリンクでjQueryを使用した例が示されています：http : //docs.jquery.com/Plugins/Validation/Methods/minlength

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});
  });
  </script>
</head>
<body>

<form id="myform">
  <label for="field">Required, Minimum length 3: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>
— ヴァレリー・ストローダー
ソース
1
「（maxLengthのとは違って）はminLength属性はHTML5でネイティブに存在しません」はい、それはありません：w3.org/TR/html5/...
— mikemaccana
ChromeやOpera以外ではまだサポートされていません。caniuse.com/#search=minlength
— rmcsharry
5

HTML5ではありませんが、いずれにしても実用的です。たまたまAngularJSを使用する場合ng-minlengthは、入力とテキストエリアの両方に使用できます。このPlunkも参照してください。

— mik01aj
ソース
Angularが標準に準拠するように書かれていれば、彼らはそのようなものを使用しdata-ng-minlengthたでしょうが、なぜ開発者は標準を気にするのでしょうか？> __>
— ジョン
4
— mik01aj 2017
4

jQueryを使用してHTML5を組み合わせたtextareaのソリューションでは、最小の長さを確認するための検証が必要でした。

minlength.js

$(document).ready(function(){
  $('form textarea[minlength]').on('keyup', function(){
    e_len = $(this).val().trim().length
    e_min_len = Number($(this).attr('minlength'))
    message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>
— ヒエップディン
ソース
とても便利でエレガントな答え！
— Silvio Delgado 2017年
4

minlength属性は現在、ほとんどのブラウザで広くサポートされています。

<input type="text" minlength="2" required>

ただし、他のHTML5機能と同様に、IE11はこのパノラマから欠落しています。したがって、IE11の幅広いユーザーベースを使用しpatternている場合は、ほとんどのブラウザー（IE11を含む）でほぼ全面的にサポートされているHTML5属性の使用を検討してください。

（HTMLを生成するフレームワークに基づいて）美しく均一な実装と拡張可能または動的なものにするために、pattern属性に投票します。

<input type="text" pattern=".{2,}" required>

を使用する場合、まだ少し使いやすさの問題がありpatternます。を使用すると、直感的でない（非常に一般的な）エラー/警告メッセージが表示されますpattern。このjsfiddle以下を参照してください：

<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
  Input with minlength: <input type="text" minlength="2" required name="i1">
  <input type="submit" value="Submit">
</form>
<br>
<form action="#">
  Input with patern: <input type="text" pattern=".{2,}" required name="i1">
  <input type="submit" value="Submit">
</form>
スニペットを展開

たとえば、Chromeでは（ただし、ほとんどのブラウザで同様）、次のエラーメッセージが表示されます。

Please lengthen this text to 2 characters or more (you are currently using 1 character)

minlengthおよびを使用して

Please match the format requested

を使用してpattern。

— ガブリエル・ペトロワ
ソース
2

新しいバージョン：

それは使用（textareaとinput）を拡張し、バグを修正します。

// Author: Carlos Machado
// Version: 0.2
// Year: 2015
window.onload = function() {
    function testFunction(evt) {
        var items = this.elements;
        for (var j = 0; j < items.length; j++) {
            if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
                if (items[j].value.length < items[j].getAttribute("minlength") && items[j].value != "") {
                    items[j].setCustomValidity("The minimum number of characters is " + items[j].getAttribute("minlength") + ".");
                    items[j].focus();
                    evt.defaultPrevented;
                    return;
                }
                else {
                    items[j].setCustomValidity('');
                }
            }
        }
    }
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var isChrome = !!window.chrome && !isOpera;
    if(!isChrome) {
        var forms = document.getElementsByTagName("form");
        for(var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', testFunction,true);
            forms[i].addEventListener('change', testFunction,true);
        }
    }
}
— カルロスマチャド
ソース
このエレガントな更新されたソリューションをありがとう。minlengthをサポートしていないため、Chrome / Opera以外でも機能しますか？caniuse.com/#search=minlength 私はちょうどMacのSafariでそれをテストし、それが仕事をしません:(私はあなたがそう多分私は何かを間違ってやっている、非クロム/ Operaブラウザ用のEventListenerを追加している参照してください。
— rmcsharry
Safariをデバッグした後、var items = this.elements; フォームのアイテムではなく、FORMSコレクションを返します。変だ。
— rmcsharry 2016年
2

オートフィルがオンで、フィールドがオートフィルブラウザの組み込みメソッドによるフィールドである場合、Chromeで時々、最小長の検証ルールをバイパスすることに気づきました。この場合、次の属性でオートフィルを無効にする必要があります。

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— タルシボニー
ソース
これはパスワードフィールドに関するものではありません。
— イゴールポポフ
これはHTML入力に関するものであり、パスワードは確かにHTML入力です。
— talsibony 2017年
2

http://caniuse.com/#search=minlengthを参照してください。ブラウザによっては、この属性をサポートしていない場合があります。

「タイプ」の値がそれらの1つである場合：

テキスト、電子メール、検索、パスワード、電話、またはURL（警告：番号を含めない| ブラウザーが「電話」をサポートしていない -2017.10）

minlength（/ maxlength）属性を使用して、最小文字数を指定します。

例えば。

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

または「パターン」属性を使用します：

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

「タイプ」がnumberの場合、althougth minlength（/ MAXLENGTH）がサポートされていない、あなたが使用することができます分。代わりに（/ max）属性を。

例えば。

<input type="number" min="100" max="999" placeholder="input a three-digit number">
— レビニート
ソース
1

このJavaScriptコード[minlength.js]を書きました。

window.onload = function() {
    function testaFunction(evt) {
        var elementos = this.elements;
        for (var j = 0; j < elementos.length; j++) {
            if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
                if (elementos[j].value.length < elementos[j].getAttribute("minlength")) {
                    alert("The textarea control must be at least " + elementos[j].getAttribute("minlength") + " characters.");
                    evt.preventDefault();
                };
            }
        }
    }
    var forms = document.getElementsByTagName("form");
    for(var i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', testaFunction, true);
    }
}
— カルロスマチャド
ソース
1

この動作を行いたい場合は、
常に入力フィールドに小さな接頭辞を表示するか、ユーザーが接頭辞を消去できないようにします。

   //prefix="prefix_text"
   //if the user change the prefix, restore the input with the prefix:
   if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix)) 
       document.getElementById('myInput').value = prefix;
— カルロス・ラファエル
ソース
1

私は必要な最大値と最小値を使用しましたが、うまく機能しましたが、コーディング方法であるかどうかはわかりません。それが役に立てば幸い

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
— ハンフリー
ソース
1

私の場合、最も手動で検証し、Firefox（43.0.4）を使用minlengthしvalidity.tooShortていますが、残念ながら利用できません。

続行するには最小の長さのみを保存する必要があるため、この値を入力タグの別の有効な属性に割り当てるのが簡単で便利な方法です。その場合は、あなたが使用することができmin、maxおよびstep[タイプ=「数」]入力からプロパティを。

これらの制限を配列に格納するよりも、要素のIDを取得して配列のインデックスと一致させるよりも、同じ入力に格納されている方が簡単に見つけられます。

— クリスチャンレアバッグ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.