Gumby框架上的三個文本框？

Question

這可能是一個愚蠢的問題，但我認爲文檔非常缺乏關於表單和驗證的gumby框架。如何正確地在一行上獲取三個文本框。我試過的一切都已經搞砸了。我想要一個數量，產品數量和des。

雖然在任何人都沒有如何驗證郵編和電話號碼使用這個框架？我找不到任何有關他們驗證的文件。

<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中的元素！

如果你決定走這條路線，你有一個可點擊驗證功能 - 寫自己的正則表達式匹配郵政編碼看起來可能是這樣：

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

當然，這是一個非常簡單的例子，但是。祝你好運:)