A complete example of text box shaking effect when jQuery implements dynamic form validation

Home

Web Front-end

JS Tutorial

A complete example of text box shaking effect when jQuery implements dynamic form validation_jquery

May 16, 2016 pm 03:43 PM

jquery dynamic Jitter text box form validation

The example in this article describes the text box shaking effect when jQuery implements dynamic form validation. Share it with everyone for your reference. The details are as follows:

The dynamic form verification effect implemented by jQuery is used here. When the user enters an error or does not enter anything and clicks the submit button, the problematic input box will shake a few times to remind the user that there is a problem with this item. The text box shaking function is interesting. , this form is relatively typical, you can refer to it if you want to implement the jquery Ajax form function.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes/

The specific code is as follows:

&lt;!DOCTYPE html&gt;
&lt;head&gt;
&lt;title&gt;jQuery动态表单验证效果&lt;/title&gt;
&lt;style type="text/css"&gt;
body
{
 font-family:Arial, Sans-Serif;
 font-size:0.85em;
}
img 
{
 border:none;
}
ul, ul li
{
 list-style-type: none;
 margin: 0;
 padding: 0;
}
ul li.first
{
 border-top: 1px solid #DFDFDF;
}
ul li.last
{
 border: none;
}
ul p
{
 float: left;
 margin: 0;
 width: 310px;
}
ul h3
{
 float: left;
 font-size: 14px;
 font-weight: bold;
 margin: 5px 0 0 0;
 width: 200px;
 margin-left:20px;
}
ul li
{
 border-bottom: 1px solid #DFDFDF;
 padding: 15px 0;
 width:600px;
 overflow:hidden;
}
ul input[type="text"], ul input[type="password"]
{
 width:300px;
 padding:5px;
 position:relative;
 border:solid 1px #666;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
}
ul input.required 
{
 border: solid 1px #f00;
}
&lt;/style&gt;
&lt;script src="jquery-1.6.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
 $("#signup").click(function() {
 resetFields();
 var emptyfields = $("input[value=]");
 if (emptyfields.size() &gt; 0) {
  emptyfields.each(function() {
  $(this).stop()
   .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
   .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
   .animate({ left: "0px" }, 100)
   .addClass("required");
  });
 }
 });
});
function resetFields() {
 $("input[type=text], input[type=password]").removeClass("required");
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;ul&gt;
 &lt;li class="first"&gt;
  &lt;h3&gt;您的名字：&lt;/h3&gt;
  &lt;p&gt;&lt;input type="text" value="First and Last name" id="name" name="name" /&gt;&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;h3&gt;Email地址：&lt;/h3&gt;
  &lt;p&gt;&lt;input type="text" value="my@email.com" name="email" /&gt;&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;h3&gt;密码：&lt;/h3&gt;
  &lt;p&gt;&lt;input type="password" name="passwd" /&gt;&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;h3&gt;密码确认：&lt;/h3&gt;
  &lt;p&gt;&lt;input type="password" name="passwd_conf" /&gt;&lt;/p&gt;
 &lt;/li&gt;
 &lt;li&gt;
  &lt;h3&gt;用户名：&lt;/h3&gt;
  &lt;p&gt;&lt;input type="text" value="MyUserName" id="userName" name="user_name" /&gt;&lt;/p&gt;
 &lt;/li&gt;
 &lt;li class="last"&gt;
  &lt;a id="signup" href="#"&gt;&lt;img src="images/buttonsubmit.png" style="vertical-align:middle;" /&gt;&lt;/a&gt;&lt;img src="images/clickhere.png" style="vertical-align:middle;" /&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn