Localized custom validation error messages — jQuery (abValidate)

Image for post
Image for post

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.
<!-- If you have already jQuery script, then do not add this line -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- abValidate Library -->
<script type="text/javascript" src="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/aslamanver/abvalidate/master/abValidate.css">

2. Initialize the validation library with your form class.

$(document).ready(function () {
//.ab-form is your form class

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

<form class="ab-form" action="your_action_url">

<!-- Input and error message should be in a div class -->
<div class="my-form-group">
<input type="text" ab-validation="required|Hey dude you missed that,min:5| No no you want to type more" name="name" class="ab-validation-i" />
<div class="error"></div>

<div class="my-form-group">
<input type="submit" name="submit" value="Submit">

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

Wanna explore more? Okay, I have a bonus.

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

color: "#556b2f",
backgroundColor: "white",
debug: true

To return the current form status


Available validators for now

* required|message
* min:5|message
* max:5|message
* email|message
* confirm:elem_id - without #

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:




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