jQuery Validation, MVC and cancel button

Question

I am using ASP.Net MVC with jQuery unobtrusive client-side validation. I have a button like this:

<input type="submit" name="SubmitButton" value="Add Item" class="cancel" />

Generally the submit button makes a POST call to add a new item a list. Obviously for this purpose i don't need validation, which works fine.

The problem is, the validation error messages on all fields are briefly shown before the page reloads!

I have searched to see if the unobtrusive validation script is causing this or it's bug on jQuery validation.

Any ideas?

UPDATE: To better clarify my question:

The desired state is: when the button is marked as "cancel", the form to be posted back without any error messages shown.

The current state is: when the button is marked as "cancel", the form is posted back BUT error messages are shown!!

score 0 · Answer 1 · edited May 23 '17 at 11:43

I recommend not to use input of type submit. Instead try to use html anchor (link) - or Html.ActionLink in MVC to reload the page or redirect somewhere.
Similar question posted here: Cancel button in form

UPDATE 1 - according to @sam360 comment

You can try to put MultiButtonAtribute on action method which should handle the cancel button request:

[AttributeUsage(AttributeTargets.Method, AllowMultiple = false, Inherited = true)]
public class MultiButtonAttribute : ActionNameSelectorAttribute
{
    public MultiButtonAttribute(string matchFormKey) : this(matchFormKey, null) {
    }

    public MultiButtonAttribute(string matchFormKey, string matchFormValue) {
        this.MatchFormKey = matchFormKey;
        this.MatchFormValue = matchFormValue;
    }

    public string MatchFormKey { get; set; }
    public string MatchFormValue { get; set; }

    public override bool IsValidName(ControllerContext controllerContext, string actionName, MethodInfo methodInfo)
    {
        string value = controllerContext.HttpContext.Request[MatchFormKey];
        return value != null && (value == MatchFormValue || MatchFormValue == null);
    }
}

If the name of the button ("cancel") will be matched in the request, the cancel action mathed would handle the request.

[HttpPost]
[MultiButton("cancel")]
public ActionResult CancelAction(MyModel model)
{
 // ... update the model (e.g. remove the last item from list and return the view with updated model
}

And in the form you will have:

<input type="submit" name="cancel" value="Remove Item" class="cancel" />

But if I understand it well. You want to dynamically add/delete inputs on some form. You should consider doing it client side using javascript or jQuery functions to save some server requests (but maybe it is not an option for you if you want to support clients without javascript enabled).

Well in my case, I don't want to redirect to another page, there is a list of items on the page and the functionality is for user to be able to perform a HTTP POST action and add new item to the list. Imagine a registration form where the attendee can bring guests and the attendee requires to add/remove/update guest info and submit the final list all together. — sam360, Nov 10 '12 at 13:53
Thanks for your comment but this is not really what i am looking for. I am looking for a way to configure jQuery Validation plugin not to fire validation errors when a submit button is marked as "Cancel". The desired state is: when the button is marked as "cancel", the form to be posted back without any error messages shown. The current state is: when the button is marked as "cancel", the form is posted back BUT error messages are shown!! — sam360, Nov 16 '12 at 16:51

jQuery Validation, MVC and cancel button

1 Answers1