选择后验证输入字段答案

【问题标题】：Validate an input field after select选择后验证输入字段
【发布时间】：2017-02-02 01:58:13
【问题描述】：

在选择 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>

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

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

【问题讨论】：

像往常一样将您的初始验证应用于所有字段。然后在更改选择值时，您可以通过此链接添加/删除动态 jquery 验证jqueryvalidation.org/rules
@Danny ，根据上面的评论很容易将初始验证应用于所有字段，然后在更改时您可以验证输入，如 $('#amount').valid()。你可以使用 if($('amount').valid()){}

标签： javascript jquery validation

【解决方案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
}

【讨论】：

这也没有成功。它在下拉菜单上给出了一个验证错误：警告：没有为金额定义消息

【解决方案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>

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

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

【讨论】：

【解决方案3】：

仅在这种情况下丢弃 jquery validate。它会让你感到困惑。因为你还在学习 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>

【讨论】：