Tengo un requisito en el que necesito validar mi formulario usando JavaScript y mostrando una información sobre herramientas dentro del campo Válido/No válido.

¿Cómo puedo escribir un condicional donde SI el usuario ingresa el número correcto, aparece una marca dentro del campo y SI es falso, muestra una información sobre herramientas de error con un mensaje que detalla cuál es el error?

Idealmente, quiero conectar el código JS a una pseudoclase CSS :valid,:invalid.

Aquí hay una condición que uso actualmente en mi formulario:

 //Assignment Number Validation - [Wizard 2] fd.spRendered(function() { fd.field('Assignment_x0020_Number_x0020_').validators.push({ name: '', error: '', validate: function(value) { if ((/^\d{8}(-\d{1,2})?$/).test(value)) { $($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:green'); return true; // Validation succeded } // You land here if it did not succeed this.error = 'Invalid Assignment Number. Please enter a minimum of 8 digits.'; $($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:red'); return false; } }); });

¿Puedo negar esto?:

 $($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:green'); $($(fd.field('Title').$el).find('input')[0]).attr('style', 'color:red');

Reemplazar con:

 .fd-form .form-control.is-invalid{ color: red!important; } .fd-form .form-control.is-valid{ color: red!important; }

Siento que JQuery tiene algunas limitaciones en términos de estilo, por lo que creo que el CSS anterior proporcionará más personalización.

En pocas palabras, mi pregunta es: ¿Seguirá validando el formulario con las clases CSS :válidas e :inválidas automáticamente o tendré que agregar algo en el JS Script para 'Apuntar' a las clases CSS :válidas e :inválidas?

Cualquier orientación sobre cómo puedo abordar esto sería muy apreciada.