Prevent form from submitting when using unobtrusive validation in ASP.NET MVC 3

Question

I am trying to implement remote validation using ASP.NET MVC3 unobtrusive javascript.

It seems to work, but I am able to submit my form even if it is not supposed to be valid.

It looks like the validation is not happening fast enough. I am using the ASP.NET development server with the VS 2010 debugger and the remote validation method is not always fired. When I wait a little, the validation happens and I cannot submit the form.

I am starting to think that client-side remote validation is not reliable enough and I maybe should consider using server-side validation just to be sure the correct validations are applied.

Is there a way to fix this?

EDIT:

Like you asked, here are the part of my code relative to the problem. I will start by taking your advice and use server-side validation to avoid users bypassing my validations.

Model:

[Required(ErrorMessage = "*"), StringLength(50)]
[Remote("EventCategoryNameExists", "EventCategories",
    AdditionalFields = "EventCategoryId",
    ErrorMessageResourceType = typeof(Messages),
    ErrorMessageResourceName = "EventCategoryNameAlreadyExists")]
[LocalizedDisplayName("Name")]
public string Name { get; set; }

View:

<div id="formMain">

    @Html.HiddenFor(x => x.EventCategoryId)

    <fieldset class="formFieldset">
        <legend>@Labels.EventCategoryDetails</legend>
        <div class="formFieldsetContent">
            <table id="formTable" class="formTable">
                <tr>
                    <td class="formLabelCell" style="width: 90px;">
                        @Html.LabelFor(x => x.Name)&nbsp;:&nbsp;
                    </td>
                    <td class="formInputCell">
                        @Html.EditorFor(x => x.Name)
                        @Html.ValidationMessageFor(x => x.Name)
                    </td>
                </tr>
                <tr>
                    <td class="formLabelCell" style="vertical-align: top;">
                        @Html.LabelFor(x => x.Color)&nbsp;:&nbsp;
                    </td>
                    <td class="formInputCell">
                        @Html.EditorFor(x => x.Color)
                        @Html.ValidationMessageFor(x => x.Color)
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>
</div>

<div class="formButtons">                      
    <input type="submit" id="btnSave" value="@Labels.Save" class="formButton" />
    <input type="button" id="btnCancel" value="@Labels.Cancel" class="formButton" />
</div>

Controller:

public ActionResult EventCategoryNameExists(int eventCategoryId, string name)
{
    return Json(!_eventService.EventCategoryNameExists(eventCategoryId, name), JsonRequestBehavior.AllowGet);
}

You absolutely 100% should be using server-side validation anyway, client side validation is to improve the user experience, not for security or to ensure validity. — Paul Creasey
– Paul Creasey, Commented Apr 23, 2011 at 1:12
I totally agree with the other comments, you should ALWAYS have server-side validation. And regarding your specific problem, maybe you can share some of the validation code with us so we can try to spot the problem. — willvv
– willvv, Commented Apr 23, 2011 at 1:38
What method are you using to submit the form? Post a bit of the client side code so we can help. — BZink
– BZink, Commented Apr 23, 2011 at 6:21

jcomeau_ictx · Accepted Answer · 2011-04-23 01:11:17Z

2

Client-side validation is never enough. Javascript cannot be counted on to be enabled or correct, plus it can be bypassed by a devious user. But is your client-side validation routine returning a boolean false? If not, the normal submit action will take place regardless.

answered Apr 23, 2011 at 1:11

jcomeau_ictx

38.6k7 gold badges98 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Tuliper · Accepted Answer · 2011-04-23 19:23:44Z

Your dataannotations are processed on the server side as well - so you are OK as far as that is concerned. The remote validation attribute is not though. You need a custom validation attribute or need to also check this same routine on the server side. Extract out your validation call to a general method that you check in your HttpPost action (and if it fails use ModelState.AddError) and also have your remote validation method all this so and you should be good. Remote validation is still a decent client side feature so I wouldn't completely scrap it if you want that functionality.

As for your specific timing issue - I just did some testing on my remote validation page. I setup fiddler to have breakpoints before requests. I cannot submit my form until I return a response from the server. Try with fiddler and see if you can reproduce it that way. Im curious if something else on your page is stomping out your remote validation. I had an issue with a newer version of jQuery and remote validation. When I defaulted back to the basic MVC3 project it worked just fine - I didn't debug it further then but it was because of version differences.

Collectives™ on Stack Overflow

Prevent form from submitting when using unobtrusive validation in ASP.NET MVC 3

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related