jQuery窗體檢查 - 基於選擇菜單值添加新關鍵字

我有一個簡單的形式，只有很少的選擇和很少的輸入字段。我想執行的jQuery檢查只在表單內這三個領域：jQuery窗體檢查 - 基於選擇菜單值添加新關鍵字

<form action="action/buy.php" method="post" class="form-horizontal" id="boosterForm"> 
<select name="Quantity" id="selectQuantity" tabindex="1" class="span2"> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 
     <option value="11">11</option> 
     <option value="12">12</option> 
     <option value="13">13</option> 
     .................. 
     <option value="99">99</option> 
</select> 

<input class="span11" id="wizard_url" type="text" name="Website" placeholder="http://www.example.com"> 

<input class="span11" type="text" name="Keywords"> 

<button class="btn btn-large btn-warning" type="submit" name="campaignSubmit" value="Buy Now" >Buy Now</button> 

</form>

我想要做的就是讓/塊的用戶，當他從選擇菜單中選擇「數量」下面的值3，6，9，12 ，15,18,21,24,27,30,33,36,39,42,45 .... 99，以輸入每三個數量由昏迷分開的1個新關鍵字。

例如，如果他從「數量」下拉菜單中選擇＃3，他不允許在「關鍵字」字段內添加任何逗號（，），如果他在＃4-＃6之間進行選擇，則只允許他輸入一個逗號，如果他選擇＃7 - ＃9，他只能輸入兩個逗號，並且一直輸入＃99，當他被允許輸入32個逗號時。

如果他們輸入更多的逗號，然後允許我想在字段下方顯示一個簡單的警告，讓他們知道他們不能添加更多的關鍵字，例如，「添加的關鍵字的最大數量」。我也不想讓他們提交表格，直到他們完成這個任務。

而最後一件事情，如果字段「網站」爲空，他們也不能提交表格。

我正在嘗試一些預製的jQuery表單檢查腳本，但他們都沒有提供我上面需要的，我不是jQuery中的專家來自己做。

任何幫助最受讚賞。非常感謝。

來源

2013-09-21 DigitalWhirl LLC

如果有人選擇「4」或「5」或「10」，那麼邏輯和爲什麼是逗號，是不是應該是關鍵字？ –

如果有人選擇4或5，它將允許他們添加2個逗號，因爲它在3-6之間，並且如果用戶輸入10個用戶將被允許輸入3個關鍵字，因爲它在9-12之間。逗號之所以是因爲關鍵字通常用逗號分隔。我在文本中添加了一些小改動，以便您更容易理解。謝謝 –

檢查答案，它有效（4-6 = 1逗號，7-9 = 2逗號，10-12 = 3逗號等），網站不能留空。 –

你可以試試這個（它的工作原理4-6 = 1逗號是允許的，7-9 = 2逗號是允許的，10-12 = 3逗號是允許的，等等，並website不能爲空）

$(function(){ 
    $('#selectQuantity').on('change', function(){ 
     var val = $(this).val(); 
     if(val > 3) { 
      var div = val/3, mod = val % 3; 
      if(mod == 0) { 
       var commas = div-1; 
      } 
      else { 
       var commas = parseInt(div); 
      } 
      $('input[name="Keywords"]').attr('data-commas', commas); 
     } 
    }); 

    $('[name="campaignSubmit"]').closest('form').on('submit', function(e){ 
     var el = $('input[name="Keywords"]'); 
     val = el.val(), commas = (val.split(',').length -1), msg = ''; 
     if(commas) { 
      if(!el.attr('data-commas')) { 
       msg = "You can't put any commas in 'Keywords' field !"; 
      } 
      else { 
       if(el.attr('data-commas') && commas > el.attr('data-commas')) { 
        msg = "You can't put more than " + el.attr('data-commas') + " comma(s) in 'Keywords' field!"; 
       } 
      } 
     } 
     if($('input[name="Website"]').val() == '') { 
      msg += "\nWebsite can't be left blank !"; 
     } 
     if(msg) { 
      e.preventDefault(); 
      alert(msg); 
     } 
    }); 
});

DEMO.

來源

2013-09-21 18:32:36

你的另一個很好的答案。按需要工作。非常感謝！ –

很高興知道，最歡迎:-) –

jQuery窗體檢查 - 基於選擇菜單值添加新關鍵字

回答

相關問題