Stackoverflow的动画必填字段验证方法？

Question

我正在开发一个ASP.NET网站。目前，我正在通过在页面顶部添加必需的字段验证器和验证摘要控件来进行必要的字段验证。但是我在stackoverflow中看到了一个有趣的验证。

当你点击提交按钮弹出一点动画。我猜测它通过使用jquery完成。我想要那个确切的验证方法。带有摇动效果的整个验证事情。我对Jquery不熟悉。任何资源都会有用。

非常感谢。

这里是链接

https://stackoverflow.com/contact

下面是屏幕截图

http://i62.tinypic.com/ofd4b4.jpg

Answer 1

看看this答案使用jQuery

至于你的实际问题表单验证，下面的代码将做的工作。 检查the jsfiddle I created查看下面的代码的结果。

注意：为了这个工作，你必须使用正确的jQuery版本。我使用的小提琴版本是jQuery 1.9.1与jQuery UI 1.9.2

HTML

<form id="myForm"> 
    <input id="myTextID" type="text" placeholder="Enter Text Here" /> 
    <div class="alert"> 
     <div class="alert-point"></div><span>No text was input</span> 

     <div class="close">X</div> 
    </div> 
    <br/> 
    <br/> 
    <br/> 
    <select id="mySelectID"> 
     <option>Select something</option> 
     <option>Some option</option> 
     <option>Some other option</option> 
    </select> 
    <div class="alert"> 
     <div class="alert-point"></div><span>You must select an option. Note the first option is not a valid one</span> 

     <div class="close">X</div> 
    </div> 
    <br/> 
    <br/> 
    <br/> 
    <input id="myButtonID" type="button" value="Submit" class="submit" /> 
</form> 
<p>If no text is entered in the input box above and/or no selection is made (meaning the default selection is ignored) when the button is clicked, the error will show up</p> 

的HTML是按照特定的顺序： 形式包括所有必要的元素。 输入（或选择等），接着是div（类别为.alert）。 <br/>标签可以删除和CSS可以播放使其更漂亮（在代码，布局和外观方面），但我只是想显示其背后的逻辑 div标签有class="alert"有3个部分。

1. 三角（类.alert-point）
2. 警报消息（以span标签）
3. X按钮关闭该警告（我用了div标签为这个，因为我认为这是最简单的）

警报的3个内部组件全部设置为显示inline-block

CSS

input, select { 
    position:relative; 
    float:left; 
} 
.alert { 
    padding:10px; 
    background-color:#C44D4D; 
    position:relative; 
    color:white; 
    font:13px arial, sans-serif; 
    font-weight:bold; 
    display:none; 
    float:left; 
    opacity:0; 
    margin-left:7px; 
    margin-top:2px; 
} 
.alert-point { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-top: 10px solid #C44D4D; 
    position:absolute; 
    left:-10px; 
    top:0px; 
} 
.alert>span { 
    line-height:24px; 
} 
.alert>.close { 
    background-color:none; 
    border:1px solid rgba(255, 255, 255, 0.3); 
    margin-left:10px; 
    width:20px; 
    height:20px; 
    line-height:20px; 
    text-align:center; 
    color:white; 
    display:inline-block; 
    cursor:pointer; 
} 
.submit { 
    cursor:pointer; 
} 

的CSS简单地使用float:left;和position:relative; 的div标签与.alert被设置为display:none;类opacity:0;这样定位的元素，当文档载入，所有的警报不可见（不透明度设置为0 jQuery中的动画，默认情况下是1） 其余的CSS只是改善了外观。

JS

$("#myButtonID").click(function() { 
    var numShakes = 3; //full cycles 
    var distance = 10; //in pixels 
    var cycleSpeed = 1000; //in milliseconds 
    if ($("#myTextID").val() === "") { 
     $("#myTextID").next("div").css({ 
      display: "inline-block" 
     }); 
     $("#myTextID").next("div").animate({ 
      opacity: 1 
     }, 500, function() { 
      $(this).effect("shake", { 
       direction: "left", 
       times: numShakes, 
       distance: distance 
      }, cycleSpeed); 
     }); 
    } 
    if ($("#mySelectID")[0].selectedIndex === 0) { 
     $("#mySelectID").next("div").css({ 
      display: "inline-block" 
     }); 
     $("#mySelectID").next("div").animate({ 
      opacity: 1 
     }, 500, function() { 
      $(this).effect("shake", { 
       direction: "left", 
       times: numShakes, 
       distance: distance 
      }, cycleSpeed); 
     }); 
    } 
}); 
$(".close").click(function() { 
    $(this).parent().animate({ 
     opacity: 0 
    }, 1000, function() { 
     $(this).css("display", "none"); 
    }); 
}); 

jQuery代码具有2个功能：

• 按钮点击功能（处理表单验证）
• 股利点击功能（其处理所述接近警报）

按钮点击功能 此功能将在稍后使用摇动功能的蝙蝠声明3个变量。如你所愿玩这些值。 - numShakes确定晃动的影响将运行 的次数 - distance确定在该对象将在给定方向移动的像素的距离（从左至右是默认值） - cycleSpeed确定的抖动效果的速度

声明这3个变量后，每个if语句代表一个不同的输入项目。如果您有更多输入，请复制并粘贴if语句，然后更改我在后面提到的内容。

的if语句的结构类似于这样：

1. 的if声明确定的值是输入，选择等，所以在第一if发言中，我们用的#myTextID的ID获取输入的值如果设置为""，换言之，没有输入任何内容，则执行以下操作。这应该在那里输入基于键盘输入的任何领域的工作（在文字方面或数字）
2. 然后我们得到如下DOM中#myTextID元素，这是当然的下一个div元素我们div与.alert类，我们改变它的CSS来display:inline-block;（这可以被设置为block，以及如果你愿意，我有它设置为inline-block，因为我在测试的东西出来，从来没有变回去。我们这样做的原因是为了让元素现在显示了在文档中（但它仍然是无形的 - opacity:0的CSS文件中）
3. 我们现在抢同一个项目，我们使用animate函数来设置其opacity到1后500毫秒。
4. 的500毫秒之后就到了，我们运行被设置为我们的防抖功能我们的动画结束的功能。这个函数抓取我们一直在使用的同一个项目，并使用效果方法。从效果方法来看，我们使用的效果是"shake"。我们也插上我们的点击功能
5. 重复你的所有输入变化的开始声明的那些变量，如我前面提到的我要提到的项目（有3个IDS每if语句来更改）的ID。您还应该确保您正在搜索正确的“0输入”值（意味着用户尚未向必填字段中输入值）。正如我们所看到的，第二个if语句使用与第一个不同的条件。我上面提供的链接应该帮助您检查表单验证的内容

最后，div click功能会关闭警报。此功能只是将不透明度动画化回0，并且在此动画之后（动画完成后），我们将其显示设置回"none"

希望有所帮助！

---

编辑 - 代码

Answer 2

在您验证功能，当你显示你的消息，你可以使用jQuery UI shake effect

代码：

$(document).click(function() { 
    $("#toggle").effect("shake"); 
}); 

演示：http://jsfiddle.net/p8xx3t2f/