web-dev-qa-db-ja.com

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

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

HTML5には、フィールドの値の最小長を設定できるような他の属性がありますか。

html5html5-validation
555
emilan

pattern属性 を使用できます。 required属性 も必要です。そうでなければ、空の値を持つ入力フィールドは constraint validation から除外されます。

<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)">
1228
user123444555621

HTML5 spec には is minlengthプロパティがあり、validity.tooShortインタフェースもあります。

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

138
rhgb

これはHTML 5のみの解決策です （minlength 5、maxlength 10文字の検証が必要な場合）

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
17
Ali Çarıkçıoğlu

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

minlengthが機能しない場合は、patternタグに@ Pumbaa80で説明されているinput属性を使用してください。

テキストエリアの場合： 最大設定の場合。 maxlengthを使用し、minの場合は このリンクに移動します 。

あなたはここで最大と最小の両方を見つけるでしょう。

10
SohelAhmedM

（maxLengthとは異なり）minLength属性は、HTML 5にネイティブには存在しません。ただし、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>
5
Valéry Stroeder

HTML5ではなく、実用的です： AngularJS を使用する場合は、入力領域とテキスト領域の両方に ng-minlength を使用できます。 this Plunk もご覧ください。

5
mik01aj

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>
4
Hiep Dinh

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

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

しかし、他のHTML5機能と同様に、IE11はこのパノラマにはありません。それで、もしあなたが広いIE11ユーザベースを持っているなら、 ほとんどのブラウザ （IE11を含む）のほぼ全面的にサポートされているpattern 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
Gabriel Petrovay

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

"type"の値がそれらの1つであるならば：

テキスト、電子メール、検索、パスワード、tel、またはurl （警告：含まない number | ブラウザのサポートなし "tel" now - 2017.10）

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

例えば。

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

または "pattern"属性を使う：

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

"type"が number の場合、althougth minlength （/ maxlength）はサポートされません。代わりに min （/ max）属性を使用できます。

例えば。

<input type="number" min="100" max="999" placeholder="input a three-digit number">
2
levinit

新しいバージョン：

それは使用（テキストエリアと入力）を拡張し、バグを修正します。

// 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);
        }
    }
}
2
Carlos Machado

私はrequiredの有無にかかわらずmaxlengthとminlengthを使用しました、そしてそれは私にとってHTML5のために非常にうまくいきました。

<input id="passcode" type="password" minlength="8" maxlength="10">

`

2
benaff033

この振る舞いをしたい場合は、
常に 入力フィールドに小さなプレフィックスを表示する または ユーザーはプレフィックスを削除できない ：

   //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
Carlos Rafael

自動入力がオンになっていてフィールドが自動入力ブラウザの組み込みメソッドによってフィールドになっている場合は、クロムで表示されることがあります。この場合、最小長の検証規則は無視されます。

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
1
talsibony

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

続行するには最小の長さを格納するだけでよいため、この値をinputタグの別の有効な属性に割り当てることが簡単で便利な方法です。その場合は、[type = "number"]入力からmin、max、およびstepプロパティを使用できます。

これらの制限を配列に格納するよりも、要素IDを配列のインデックスと一致させるのではなく、同じ入力に格納されている方が簡単です。

1
Christian Læirbag

私はこの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
Carlos Machado

私はmaxとminを使用し、それから必要とされ、それは私のために非常にうまくいったが、確かでないのはコーディング方法であるかどうかである。私はそれが役立つことを願っています

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
1
Humphrey