Create custom alert with sweetAlert jQuery plugin

Alert is one of the most used functions in JavaScript. By this, you can interact with users by showing information on the screen.

For example, use it in form validation for showing the warning on invalid input or using it to display the alert message when form successfully submitted, etc.

But, the problem is it does not look good on the screen.

There are many free jQuery plugins that you can use to show the user-friendly message box.

In this tutorial, I am using sweetAlert jQuery plugin to show a custom message box on the screen and use it as an alternative to the default alert box.

It looks much better than the default alert and it is responsive.

Create custom alert with sweetAlert jQuery plugin

Read more

Add validation to the form with jQuery Validation Plugin

You generally display an error message while validating the form by using the alert or place message on <div> or <span> elements and show or hide them.

If you have a form that has many elements and you need to add Client-side Validation.

You are using the container to show the error messages in this case you need to create several container elements. It is a time-consuming process.

For making your validation process simpler there are many free jQuery plugins.

In this tutorial, I will explain you about Validation jQuery Plugin, using that you can define validation faster and systematic way.

It has the built-in method which you can use for validation and you can change the text of the default error message.

You can also create your own method if you do not find any built-in method according to your requirement.

Add validation to the form with jQuery Validation Plugin

Read more

How to Shake an element with jQuery UI

In the WordPress Admin dashboard login form, the login field animates with a shake effect whenever the user enters incorrect details. This feature can be easily implemented using the jQuery UI library.

With jQuery UI, you can apply a shake effect to an element, specifying the direction and distance of the shake.

This functionality serves to alert users when invalid input is entered.

In the demonstration, a login form is created, and it shakes when an incorrect username and password are entered.

How to Shake an element with jQuery UI

Read more