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.