jQuery Validator自定义ValidarMedios方法未触发问题求助

问题描述 #

为jQuery Validator添加两个自定义验证方法，ValidarImporte可正常触发，但ValidarMedios始终无法生效，无法定位问题根源。以下为表单cajaInsert的相关代码，包含点击事件处理、验证规则定义及HTML结构。

代码片段 #

点击事件处理 #

$(document).on('click', '#btnConfirma', function (e) {
    e.preventDefault(); 
   
    $("#cajaInsert").validate();
    
    if ($("#cajaInsert").valid()) {
        $.ajax({
            type: "GET",
            url: "Caja?action=preInsert&modo=02&idsesion=${idsesion}",
            dataType: 'json',
            data: $("form").serialize(),
            success: function (response) {
                if (response.datos[0].warning === "true") {
                    Swal.fire({title: '! Atencion !', text: response.datos[0].mensaje, icon: "warning"}).then(
                            function (isConfirm) {
                                continuaInsert();
                            });
                } else {
                    continuaInsert();
                }
            },
            error: function (xhr, exception) {
                errorCallback(xhr, exception);
            }
        });
    }
});

验证规则定义 #

$(document).ready(function () {
    $.validator.addMethod('ValidarMedios', function (value, element, param) {
        let suma = 00;
        let total = parseFloat($('#importe').val());
        suma += parseFloat($('#impEfectivo').val());
        suma += parseFloat($('#impChequet').val());

        if (suma !== total) {
            return false;
        } else {
            return true;
        }
    }, 'La Suma de (Efectivo+Cheques) NO Coincide con el Total del Comprobante !');

    $.validator.addMethod('ValidarImporte', function (value) {
        if (parseFloat(value) > 0) {
            return true;
        } else {
            return false;
        }
    }, 'El Total debe ser mayor a Cero !');

    $("#cajaInsert").validate({
        rules: {               
            fecha: { required: true },
            cboOpera: { required: true },
            concepto: { required: true },
            importe: { required: true, ValidarImporte: true },
            impEfectivo:{ ValidarMedios: true }
        },
        messages: {
            fecha: { required: "Por favor indique la fecha del comprobante" },
            cboOpera: { required: "Indique si se Trata de Ingreso o Egreso" },
            concepto: { required: "El Concepto NO Puede Estar Vacio !" },
            importe: { required: "El Total NO puede ser Cero !!!" }
        }           
    });
});

HTML结构（Medios部分） #

<fieldset class="border p-2">
    <legend class="w-auto"  style="color:red; font-style:italic;">Medios</legend>
    <div class="form-group row mt-1 mb-0">
        <label for="impEfectivo" id="lblefectivo" class="col-sm-2">Efectivo</label>                        
        <div class="col-sm-2">
            <input type="number" class="form-control w-50 Numero" name="impEfectivo" value="0">
        </div>
    </div>
    <div class="form-group row mt-1 mb-0">
        <label for="impChequet" id="lblchequet" class="col-sm-2">Cheques Cartera</label>                        
        <div class="col-sm-2">
            <input type="number" class="form-control w-50 Numero" id="impChequet" name="impChequet" value="0">
        </div>
        <button type="button" id="botChequesT" name="botChequesT" class="btn btn-success" data-toggle="modal"
                data-target="#formChequeT">Cheques en Cartera
        </button>
    </div>    
</fieldset>

问题根源分析 #

1. 重复初始化验证器：点击事件中再次调用$("#cajaInsert").validate();，会覆盖或干扰document.ready中已初始化的验证规则，导致自定义方法绑定失效。
2. 验证触发时机单一：ValidarMedios仅绑定在impEfectivo字段，仅当该字段值变化或失焦时触发验证。但该验证依赖importe和impChequet的值，这两个字段变化时不会自动触发验证。
3. 数值转换异常未处理：若字段值为空或非数值，parseFloat返回NaN，导致suma或total为NaN，判断逻辑失效。
4. 依赖字段缺失确认：代码依赖$('#importe').val()获取总金额，但提供的HTML未包含该字段，若字段不存在或id错误，直接导致验证逻辑失败。

解决方案 #

1. 移除重复的验证器初始化 #

删除点击事件中的$("#cajaInsert").validate();，验证器仅需在document.ready中初始化一次：

$(document).on('click', '#btnConfirma', function (e) {
    e.preventDefault(); 
    // 移除此行：$("#cajaInsert").validate();
    if ($("#cajaInsert").valid()) {
        // 原有AJAX逻辑保留
    }
});

2. 修复数值转换异常 #

修改ValidarMedios方法，添加默认值处理避免NaN：

$.validator.addMethod('ValidarMedios', function (value, element, param) {
    let total = parseFloat($('#importe').val()) || 0;
    let efectivo = parseFloat($('#impEfectivo').val()) || 0;
    let chequet = parseFloat($('#impChequet').val()) || 0;
    let suma = efectivo + chequet;
    return suma === total;
}, 'La Suma de (Efectivo+Cheques) NO Coincide con el Total del Comprobante !');

3. 扩展验证触发时机 #

当importe或impChequet变化时，手动触发impEfectivo的验证：

$(document).ready(function () {
    // 原有addMethod和validate代码保留

    $('#importe, #impChequet').on('input', function() {
        $('#impEfectivo').valid(); // 触发目标字段验证
    });
});

4. 确认importe字段存在 #

检查HTML中是否存在id为importe的输入字段，示例如下：

<div class="form-group row">
    <label for="importe" class="col-sm-2">Total</label>
    <div class="col-sm-2">
        <input type="number" class="form-control" id="importe" name="importe" value="0">
    </div>
</div>

额外建议 #

• 表单提交时$("#cajaInsert").valid()会自动触发所有规则检查，无需额外操作。
• 若希望提交时必检ValidarMedios，可给impEfectivo添加required: false，确保即使字段未修改也会触发验证。

内容的提问来源于stack exchange，提问作者user5827992