2012-11-11 42 views
1

这可能是一个愚蠢的问题,但我认为文档非常缺乏关于表单和验证的gumby框架。如何正确地在一行上获取三个文本框。我试过的一切都已经搞砸了。我想要一个数量,产品数量和des。Gumby框架上的三个文本框?

虽然在任何人都没有如何验证邮编和电话号码使用这个框架?我找不到任何有关他们验证的文件。

<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> 

回答

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 --> 

为了让插入符很好地排队,你可能想尝试包装你的个人点域div.row中的元素!

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

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

当然,这是一个非常简单的例子,但是。祝你好运:)

相关问题