Question

I have added a shake animation class (Css3) which i add when the text boxes are empty, but its not working properly as asp.net mvc redirect the user to home page again. Any approach to handle this thing.

 public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(string username, string password)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("Index", "Product");
        }
        else
        {
            return RedirectToAction("Index","Home");
        }  
    }

jquery function

 $('#loginButton').click(function () {
    shaking();
});


function shaking() {
    if ($('#username').val() || $('#password').val()) {

    }
    else {
        $('#loginForm').addClass("shake");
        setTimeout(function () {
            $('#loginForm').removeClass();
        }, 2000);
    }
};

Answer 1

You need to prevent the default action on your button click, otherwise it causes the form to be submitted (causing the redirect you notice). If you pass the event into your function you can prevent the submit by calling preventDefault() on the event if the relevant fields aren’t filled in.

$('#loginButton').click(function (e) {
    shaking(e);
});


function shaking(e) {
    if ($('#username').val() && $('#password').val()) { // should be an && to check both
        // do something if both username and password filled in
    }
    else {
        e.preventDefault(); // prevent form from being submitted

        $('#loginForm').addClass("shake");
        setTimeout(function () {
            $('#loginForm').removeClass();
        }, 2000);
    }
};​