0

我有一个简单的表单，只有很少的选择和很少的输入字段。我只想对表单中的这三个字段执行 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 专家，无法自己制作。

非常感谢任何帮助。非常感谢。

4

1 回答 1

1

你可以试试这个（它的作用是4-6=1允许逗号，7-9=允许逗号， =2允许逗号等等，不能留空）10-123website

$(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);
        }
    });
});

演示。

于 2013-09-21T18:32:36.383 回答