Localized custom validation error messages — jQuery (abValidate)

Don’t give default error messages to your users give in their language which they understand!

早上好,编程专家的问候,我知道您会翻译。

Haha, I know you may not read Chinese since you Googled in English, then how are you going to give only your error messages in some default language or HTML standard technical jargon such:

  • “This field is required” (You can’t leave this field blank.)
  • “Please enter your phone number in the format xxx-xxxx” (The form enforces three numbers followed by a dash, followed by four numbers.)
  • “Please enter a valid email address” (Used if your entry is not in the format of “somebody@example.com.”)
  • “Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number.”

Yep, validation is very important even you’re on an airplane.

You can replace these messages with your local language or in a custom sentence your audience can understand.

No no, I did not mean you have to write 2000 lines of code to transform the standard error message, that’s none of your business and leave it to us.

You just have to include a jQuery library in your project as below.

  1. Include the CDN scripts.

2. Initialize the validation library with your form class.

3. That’s all, now write all of your code in your HTML no need to write functions again.

Example screenshot
  • Add .ab-validation-i class to your inputs which should be validated and write your validations in ab-validation

You can set the debug mode on so keep tracking on the console.

To return the current form status

Available validators for now

That's it for this article, I hope you enjoyed reading this post as much as I enjoyed writing it!

If you can visit the repo and explore more about functionalities please visit this Github link:

https://github.com/aslamanver/abvalidate

Example:

https://aslamanver.github.io/abvalidate

If you have any thoughts and comments, feel free to leave a comment below. Don’t forget to share your love by clapping for this post as many times you feel like.

Happy Coding 👨‍💻 .

Give a star if it’s useful and also a clap.

Passionate in AI Deep Learning, Find me on GitHub & StackOverflow

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store