1

Tengo un formulario con dos campos en los cuales se ingresan números, y la suma de estos debería dar igual a un total que se suman a partir de una tabla de productos, el cliente elije los productos que quiera se realiza la suma automática de estos y da un total, en caso de que elija dos medios de pago debería decir cuanto va a pagar con cada uno, y la suma de estos debería ser igual a la suma de los productos seleccionados. El comportamiento que busco es que cuando modifique los inputs y se vayan validando, hasta acá todo bien, el problema es cuando me muestra los mensajes de error, ya que solo los muestra debajo de un solo input y yo los quiero debajo de ambos. Si le saco los grupos funciona de la manera que quiero pero no se validan en conjunto que es también lo que necesito. Mi formulario (todo resumido así se hace más legible):

<form id="myForm"> 
    <input id="monto1" name="monto1" type="text">
    <input id="monto2" name="monto2" type="text">
    <button type="submit">Enviar</button>
</form>

y lo siguiente para validar:

jQuery.validator.addMethod("controlMonto", function(value, element, options) {
    let valueAux = $(options.monto).val()
    if (!valueAux) {
        valueAux = 0
    }
    let totalControl = parseFloat(value) + parseFloat(valueAux)
    return totalControl >= $("#total").text() 
}, "La suma de los montos es menor al total");

$("#formFinalizarPago").validate({
    rules: {
        monto1: {
            required: true,
            controlMonto: {
                montoPago: '#montoPago2'
            }
        },
        montoPago2: {
            required: true,
            controlMonto: {
                montoPago: '#montoPago1'
            }
        },
    },
    groups: {
        montos: "monto1 monto2"
    },
    messages: {
        monto1: {
            required: "Campo obligatorio"
        },
        monto2: {
            required: "Campo obligatorio"
        },
    },
    submitHandler: function() {
        finalizar()
    }
});

Espero que se entienda, gracias.

1 respuesta 1

0

Finalmente me dí cuenta que era muy sencilla la solución, debería haber revisado la documentación antes, lo solucione con la validación por elemento como lo hace en este link: https://jqueryvalidation.org/Validator.element/ Cada vez que necesito validar un elemento en consecuencia del cambio de otro solamente capturo ese evento y hago la validación como muestra en la documentación.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.