CSS translation series-(for web form verification, use jquery for animation verification)

Source of the original article. comrades who have experience in project development may encounter issues such as form verification, check the validity of user input, and filter out illegal user input, the traditional pop-up warning box-based method does not meet the needs of users for visual appearance. How to prompt users in a more friendly way is a problem that should be considered by UI designers.

 

The technology is quite simple: when a user presses the submit button, verification occurs, and all illegal input fields will shake. Below is a very simple form. I will not explain the structure style of the form, here I only focus on animation effects.

 

<ul>    <li class="first">        
Working principle: When you press the submit button, jquery will get all empty input fields. if at least one empty input field exists, the animation is applied to the input field.
$("#signup").click(function() {    var emptyfields = $("input[value=]");    if (emptyfields.size() > 0) {        emptyfields.each(function() {            // animation goes here        });    }}); 
 
Let's take a look at how to create a simple animation. We need to move each input field 10px to the left, move 10px to the right, repeat this action once, and set it back to their original position.
$("#signup").click(function() {    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");        });    }});
Remember: static verification feedback cannot replace this type of animation verification. Once verification fails, every illegal input field needs to be clearly marked. This special effect allows users to capture the user's attention, here you can get more verification articles