Question

这可能是一个愚蠢的问题，但我认为文档在表单和验证上的gumby框架上非常缺乏。如何正确地在一行上获得三个文本框。我试过验证插件的所有内容都搞砸了。我想要数量，产品数量和des在一行。

虽然在任何人都没有如何使用此框架验证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>

Answer 1

我不得不手动执行验证，因为我无法使用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 -->

为了让插入符号很好地排列，您可能想尝试将div.row中的各个.field元素包装起来！

如果你决定走这条路，你有一个可点击的验证功能 - 编写你自己的正则表达式来匹配邮政编码可能是这样的：

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

但当然这是一个非常简单的例子。祝你好运：）

Gumby框架上的三个文本框？

1 个答案: