1

这可能是一个愚蠢的问题，但我认为关于表单和验证的 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>
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 回答