Question

我正在使用3个字段。字段3的值与字段1和字段2的值之和应相差500。否则，这3个字段应以错误突出显示。其他错误类别将从这3个字段中删除。（此验证在这3个字段中使用）。但是，与此同时，字段2仅允许使用1000到2000范围的值。如果字段2包含值3000，并且该字段正在突出显示，并且当我们单击任何其他字段（具有其他验证）时，错误类将被删除。。如何解决呢？

$.validator.addMethod("compareWeights", function(value, element) {
    var total = 0;
    var difference = 0;
    var valuef3 = $(element).closest('.row .field').find('.field3').val();
    var tareWeight = $(element).closest('.row .field').find('.field2').val();
    if ($(element).val() === '' || valuef3 === '') {
        return true;
    }
        total = parseInt(tareWeight)+parseInt($(element).closest('.row .field').find('.field1').val());

    difference = Math.abs(total - valuef3);
    if (difference >  500){
        $(element).closest('.row .field').find('.field1').addClass('error');
        if (!$(element).closest('.row .field').find('.field2').prop('disabled')){
            $(element).closest('.row .field').find('.field2').addClass('error');
        }
        if (!$(element).closest('.row .field').find('.field3').prop('disabled')){
                $(element).closest('.row .field').find('.field3').addClass('error');        
        }
        return false;
    } else {
        $(element).closest('.row .field').find('.field1').removeClass('error');
        $(element).closest('.row .field').find('.field2').removeClass('error');
        $(element).closest('.row .field').find('.field3').removeClass('error');
        return true;
    }
});

此验证之后，将清除field2中突出显示的错误（如果该值不在1000-2000范围内）。如果我再次单击该字段，则会显示错误。

HTML代码：

<div class="${selectedSpan4} piece-count-span2">
                                <span class="muted cargo-weight-text-inline">&{'weight.label'}</span><br>
                                <input type="text" class="field1 compareWeights"  value="${weight}" title="&{'cargo.weight'}" />
                            </div>
                            <div class="${selectedSpan4} piece-count-span2">
                               <span class="muted">&{'tare.label'} </span><br>
                               <input type="text" 
                                             class="field2 compareWeights vgm-range-check fullWidth" value="${tare} title="&{'tare.title'}" />
                            </div>

                              <div class="${selectedSpan4} ${marginLeft0} piece-count-span1">
                                    <span class="muted">&{'cargo.label'} )</span><br>
                                    <input type="text" value="${vgm}"  
                                            class="field3 compareWeights fullWidth" title="&{'containers.vgm'}" />
                              </div>

                    </div>

vgm-range-check：是对field2的验证，以检查1000到2000范围

jQuery验证-删除其他字段中的错误类

0 个答案: