Stackoverflow's Animated Required Fields Validation Method?

Question

I am developing an ASP.NET website. Currently I am doing required field validations by simply adding a required field validater and Validation summary control at the top of the page. But I saw an interesting validation in stackoverflow.

When you click submit button its popup with a little animation. I am guessing that it done by using jquery. I want that exact validation method. Whole validation thing with the shaking effect. I am not familiar with Jquery. Any resource will useful.

Thank you very much.

Here is the Link

https://stackoverflow.com/contact

Here is the screen shot

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

Answer 1

Take a look at this answer for form validation using jQuery

As for your actual question, the code below will do the job. Check the jsfiddle I created to see the results of the code below.

Note: In order for this to work, you must use the proper jQuery version. The version I am using for the fiddle is jQuery 1.9.1 with 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>

The HTML is in a specific order: Form includes all the elements necessary. Input(or select, etc.) followed by div(with class of .alert ). The <br/> tags can be removed and CSS could be played with to make it prettier (in terms of code, layout and appearance), however I simply wanted to show the logic behind it all The div tags with class="alert" have 3 sections.

1. Triangle (class .alert-point )
2. Alert message (in span tag)
3. X button to close the alert (I used a div tag for this as I thought it to be easiest)

The 3 inner components to the alert are all set to display 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;
}

The CSS simply positions the elements using float:left; and position:relative; The div tags with class .alert are set to display:none; and opacity:0; so that when the document loads, all the alerts are not visible (opacity set to 0 for animations in jQuery, default would otherwise be 1) The rest of the CSS simply improves the appearance.

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");
    });
});

The jQuery code has 2 functions:

• Button click function (that processes the form validation)
• Div click function (that processes the close alert)

Button click function This function declares 3 variables off the bat to be used in the shake function later. Play with these values as you wish. - numShakes determines the number of times the shake effect will run - distance determines the distance in pixels that the object will move in the given direction (left to right is default) - cycleSpeed determines the speed of the shake effect

After these 3 variables are declared, each if statement represents a different input item. If you have more inputs, copy and paste the if statement, and then change what I mention later in that statement.

The if statement is structured like so:

1. The if statement determines if a value was input, selected, etc. So in the first if statement we get the value of the input with the id of #myTextID and if this is set to "" , in other words, nothing was input, then do the following. This should work for any fields where input is based on keyboard input (in terms of text or numbers)
2. We then get the next div element that follows the #myTextID element in the DOM, which is of course our div with class .alert , and we change its CSS to display:inline-block; (this could be set to block as well if you'd like, I have it set to inline-block because I was testing things out and never changed it back. The reason we are doing this is so that the element now shows up in the document (but it is still invisible - opacity:0 in the CSS document)
3. We now grab that same item and we use the animate function to set its opacity to 1 after 500 milliseconds.
4. After the 500 milliseconds is up, we run our animation end function which is set to our shake function. This function grabs the same item we've been working with and uses the effect method. From the effect method, we are using the "shake" effect. We also plug in those variables we declared at the beginning of the click function
5. Repeat for all your inputs changing, as I mentioned earlier I would mention, the id of the items (there are 3 ids to change per if statement). You should also make sure that you're searching for the proper "0 input" value (meaning that the user hasn't yet input a value into the required field). As we can see the second if statement uses a different condition than the first one. The link I provided above should help you with what to check for form validation

Finally, the div click function, which closes the alert. This function simply animates the opacity back down to 0 and following this animation (once the animation has been completed), we set its display back to "none"

Hope that helps!

---

EDIT - Added explanations below each section of code

Answer 2

In you validation function when you show your message you can use jQuery UI shake effect

Code:

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

Demo: http://jsfiddle.net/p8xx3t2f/