FormAnimation

Form Animation: when form validation <3 animate.css

Generate Convert Improve

Install / Use

/learn @nnluukhtn/FormAnimation

About this skill

Quality Score

0/100

README

jQuery Form Animation Plugin - Form Animation: when form validation <3 animate.css

The jQuery Form Animation Plugin provides drop-in animation for your existing forms, while making all kinds of customizations to fit your application really easy.

Screenshot

Getting Started

Downloading the required libraries

jQuery can be downloaded from https://jquery.com/

jQuery Validation Plugin can be downloaded from http://jqueryvalidation.org/

Animate.css can be downloaded from https://daneden.github.io/animate.css/

Including it on your page

Include jQuery and the plugin on a page. Then select a form to add animation and call the formAnimation method.

<head>
	<link href='animate.css' media='all' rel='stylesheet'>
</head>
...
<body>
	<form>
		<input required>
	</form>
	<script src="jquery.js"></script>
	<script src="jquery.validate.js"></script>
	<script src="formAnimation.js"></script>
	<script>
	$("form").formAnimation({ animatedClass: 'shake' });
	</script>
</body>

Alternatively include jQuery and the plugin via requirejs in your module.

define(["jquery", "jquery.validate", "formAnimation"], function( $ ) {
	$("form").formAnimation({ animatedClass: 'shake' });
});

Reporting issues and contributing code

Bug reports and pull requests are welcome on GitHub at https://github.com/nnluukhtn/formAnimation.

License

Related Skills

node-connect

354.2k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

112.2k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

354.2k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

354.2k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。