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

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

WBOY

Release： 2016-05-16 15:43:46

Original

1597 people have browsed it

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:

<!DOCTYPE html>
<head>
<title>jQuery动态表单验证效果</title>
<style type="text/css">
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;
}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("#signup").click(function() {
 resetFields();
 var emptyfields = $("input[value=]");
 if (emptyfields.size() > 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");
}
</script>
</head>
<body>
 <ul>
 <li class="first">
  <h3>您的名字：</h3>
  <p><input type="text" value="First and Last name" id="name" name="name" /></p>
 </li>
 <li>
  <h3>Email地址：</h3>
  <p><input type="text" value="my@email.com" name="email" /></p>
 </li>
 <li>
  <h3>密码：</h3>
  <p><input type="password" name="passwd" /></p>
 </li>
 <li>
  <h3>密码确认：</h3>
  <p><input type="password" name="passwd_conf" /></p>
 </li>
 <li>
  <h3>用户名：</h3>
  <p><input type="text" value="MyUserName" id="userName" name="user_name" /></p>
 </li>
 <li class="last">
  <a id="signup" href="#"><img src="images/buttonsubmit.png" style="vertical-align:middle;" /></a><img src="images/clickhere.png" style="vertical-align:middle;" />
 </li>
 </ul>
</body>
</html>

Copy after login

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