Question

在选择valuta下拉列表后，我需要一些帮助来验证具有最小值的输入字段。

以下是表格的一部分：

<div class="row">
    <header class="margin-bottom-20">I hereby guarantee payment up to:</header>
    <section class="col col-6">
        <label class="input">Amount
            <input type="text" name="amount" id="amount" value="7500">
        </label>
    </section>

    <section class="col col-6">
        <label class="select">Valuta
            <select name="valuta" id="valuta" onChange="Choice();">
                <option value="SEK">SEK</option>
                <option value="EUR">EUR</option>
            </select>
            <i></i>
        </label>
    </section>                                          
</div>

选择valuta后，它有一个预先填写的最低价格。这是jQuery：

<script type="text/javascript">
    $('#valuta').change(function(){
        console.log("test");
        var amount = this.value;
        var str = "";

        switch(amount){
            case "SEK":
                str = "2500";
                break;
            case "EUR":
                str = "250";
                break;
        }
        $("#amount").val(str);
    });
</script>

现在是棘手的部分（至少对我而言）。我需要在选定的valuta之后验证输入字段。我使用jQuery验证，但我不知道如何将上述jQuery与验证结合起来。

        // Validation
        $("#my-form").validate({
            // Rules for form validation
            rules:
            {
                amount:
                {
                    required: true,
                    min: 2500 (When SEK is selected)
                    min 250 (When EUR is selected)
                },

Answer 1

您可以将自己的自定义验证方法添加到jQuery。

    $.validator.addMethod('minRule', function (value, el, param) {
        if($('#valuta').val() == "SEK")
           return value > 2500;
        if($('#valuta').val() == "EUR")
           return value > 250;
    },"Please provide enter correct amount"); // Message added

用法：

amount: {
    required: true,
    minRule: 0,
    number: true
}

Answer 2

我几乎可以使用以下代码：

<script type="text/javascript">
    $('#valuta').change(function(){
        console.log("test");
        var amount = this.value;
        var str = "";

        switch(amount){
            case "SEK":
                str = "2500";
                break;
            case "EUR":
                str = "250";
                break;
        }
        if ($('#valuta').val() == 'SEK') {
            $('#amount').val("2500");
            $('#amount').attr("min", 2500);
        } else if($('#valuta').val() == 'EUR') {
            $('#amount').val("250");
            $('#amount').attr("min", 250);
        }

        $("#amount").val(str);


    });
</script>

现在的问题是，因为它在2500的输入字段上预先选择了SEK，所以验证不起作用。我可以将金额更改为1，这是一个有效的输入，但它必须是2500及以上。当我将其更改为欧元并将金额更改为250以及当我再次将其更改为SEK并将金额更改为2500以下时，我的工作正在进行。

当有人将其更改为1时，如何验证预选值？

Answer 3

仅针对此案例抛弃jquery验证。它可以让你迷惑。因为你还在学习jquery。

我尽可能地编辑你的代码。

这里

<div class="row">
    <header class="margin-bottom-20">I hereby guarantee payment up to:</header>
    <section class="col col-6">
        <label class="input">Amount
            <input type="text" name="amount" id="amount" value="7500" required>
        </label>
    </section>

    <section class="col col-6">
        <label class="select">Valuta
            <select name="valuta" id="valuta" >
             <option value="">pick valuta</option>
                <option value="SEK">SEK</option>
                <option value="EUR">EUR</option>
            </select>
            <i></i>
        </label>
    </section>                                          
</div>
<script src="jquery-1.11.3.js"></script>
<script>
$(function(){
    $('#valuta').change(function(){
        var valuta = $(this).val();
var amount = $('#amount').val();

        switch(valuta){
            case "SEK":
                if(amount<2500) amount=2500;
                break;
            case "EUR":
                if(amount<250) amount=250;
                break;
        }
        $("#amount").val(amount);
    });
});
</script>

选择后验证输入字段

3 个答案: