Skip Navigation

[Resuelto] jQuery Required field with custom error message

This support ticket is created hace 1 año, 10 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Hoy no hay técnicos de soporte disponibles en el foro Juego de herramientas. Siéntase libre de enviar sus tiques y les daremos trámite tan pronto como estemos disponibles en línea. Gracias por su comprensión.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

Etiquetado: 

Este tema contiene 3 respuestas, tiene 2 mensajes.

Última actualización por Waqar hace 1 año, 10 meses.

Asistido por: Waqar.

Autor
Mensajes
#2524005

Tell us what you are trying to do?
I have tried CRED validation, Javascript validation, and jQuery validation in order to get first name and last name required for User forms.

The only one that worked was jQuery from this post -> https://toolset.com/forums/topic/makes-fields-required/

It works fine but I cannot change the error message it gives. I tried using .append, .val() but with no luck.

I just would like to add my own error message to this code below:

jQuery( document ).ready(function() {
jQuery("input[name='first_name']").prop('required',true);
jQuery("input[name='last_name']").prop('required',true);
});
#2524715

Hi,

Thank you for contacting us and I'd be happy to assist.

If you're referring to the default 'required' field message, that each browser shows differently, I was able to customize it, using the following script:


jQuery( document ).ready(function() {
	// first name field
	jQuery("input[name='first_name']").prop('required',true);
	jQuery("input[name='first_name']").attr("oninvalid","this.setCustomValidity('Enter First Name Here')");
	jQuery("input[name='first_name']").attr("oninput","this.setCustomValidity('')");
	// last name field
	jQuery("input[name='last_name']").prop('required',true);
	jQuery("input[name='last_name']").attr("oninvalid","this.setCustomValidity('Enter Last Name Here')");
	jQuery("input[name='last_name']").attr("oninput","this.setCustomValidity('')");
});

( ref: https://stackoverflow.com/a/20189012 )

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

#2524779

Waqar, thanks for your help. I will be testing this but next week since it's the end of the year.

I tried all kind of sort, even chaining the JS but unsuccessful.

Thanks and I will reply next week!

#2527861

Sure please take your time and this ticket will stay open for a couple of weeks.