1

これはおそらくばかげた質問ですが、フォームと検証に関するガンビー フレームワークに関するドキュメントが非常に不足していると思います。1 行に 3 つのテキスト ボックスを正しく表示する方法。私が検証キャレットを試したことはすべて台無しになりました。数量、品番、商品名を一列に並べたい。

このフレームワークを使用してzipと電話番号を検証する方法はありませんか? それらの検証に関するドキュメントが見つかりません。

<dl class="field row">
     <dt class="text"><input name="qty" required type="text" placeholder="Quantity" /></dt>
     <dd class="msg"><span class="caret"></span>Enter quantity.</dd>
</dl>
<dl class="field row">
     <dt class="text"><input name="productnum" required type="text" placeholder="Product Number" /></dt>
     <dd class="msg"><span class="caret"></span>Enter product number.</dd>
</dl>
<dl class="field row">
     <dt class="text"><input name="desription" required type="text" placeholder="Description" /></dt>
     <dd class="msg"><span class="caret"></span>Enter product description.</dd>
</dl>
4

1 に答える 1

0

Gumby 検証を機能させることができなかったため、検証を手動で実行する必要がありました。私のjQueryは次のようになります：

// Form validation
$('input').blur(function(){
    if( ($(this).data('form') == 'required') && ( $(this).val() == '' ) ){
        $(this).parents('.field').addClass('error');
    }
});

...そして私のインラインフィールドは次のようになります:

<div class="row">                  
  <dl class="field inline textfield">
    <dt class="text">
      <input name="company_phone" type="text" placeholder="Company Phone" data-form="required" />
    </dt>
    <dd class="msg"><span class="caret"></span>Please enter a valid phone number</dd>
  </dl>
...
</div><!-- /.row -->

キャレットをうまく並べるには、個々の .field 要素を div.row 内にラップしてみてください。

このルートに進むことにした場合は、タップ可能な検証機能があります。郵便番号を一致させるための独自の正規表現を作成すると、次のようになります。

// Form validation
$('input').blur(function(){
    if( ($(this).attr('name') == 'zipcode') && ( !$(this).val().match(/[0-9]{5}/) ) ){
            $(this).parents('.field').addClass('error');
    }
});

もちろん、これは非常に単純な例です。幸運を ：）

于 2012-12-03T17:24:39.810 に答える