C# mvc2 client side form validation with xval, prevent post

Question

I'm using xval to use client side validation in my asp.net mvc2 web-application. Despite the errors it's giving when I enter text in a numeric field, it still tries to post the form to the database. The incorrect values are being replaced by 0 and saved to the database. But instead it shouldn't even be possible to try and submit the form. Can anyone help me out here?

I've set the attributes as below:

[Property]
[ShowColumnInCrud(true, label = "FromPriceInCents")]
[Required]
//[Range(1, Int32.MaxValue)]
public virtual Int32 FromPriceInCents{ get; set; }

The controller catching the request looks as below; I'm getting no errors in this part.

[AcceptVerbs(HttpVerbs.Post)]
[Transaction]
[ValidateInput(false)]
public override ActionResult Create()
{
  //some foo happens
}

My view looks like below:

<div class="label"><label for="Price">FromPrice</label></div>
<div class="field">
<%= Html.TextBox("FromPriceInCents")%>
<%= Html.ValidationMessage("product.FromPriceInCents")%></div>

And at the end of the view i have the following rule which in html code generates the correct validation rules

<%= Html.ClientSideValidation<Product>("Product") %>

I hope someone can helps me out with this issue, thanks in advance!

EDIT: 19th April I just found out that there is a normal button with being used instead of an input type="Button" Could this be the issue?

<button class="save" type="submit" name="save"><span>Opslaan</span></button>

Why is your ValidationMessage("product.FromPriceInCents") but your textbox uses "FromPriceInCents"? This seems suspect. Is there any reason you aren't using the strongly typed helpers? ValidationMessageFor(x=>x.FromPriceInCents) — Jab, Apr 16 '10 at 14:59
I changed the textboxes and validationmessages to strongly typed helpers. But this change doesn't affect the validation, nevertheless good tip! — Rob, Apr 19 '10 at 07:32

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

Maybe this could help:

How to use the jQuery Validation plugin with metadata, jQuery Forms and xVal together?

edited May 23 '17 at 11:48

Community

1
1

answered Apr 22 '10 at 09:31

Jan

9,858
7
26
33

This was the push i needed in the right direction! The jquery validate function did the trick. The form was loaded with jquery and after submitting the validation wasn't correctly handled – Rob Apr 22 '10 at 09:58

Artiom Chilaru · Answer 2 · 2010-04-20T20:42:35.187

2

My first and main concern here would be: why is your app saving the values in the database in the first place? While xVal is a good way to make the application user friendly, you still HAVE to do server side validation. If you don't validate your data on the server - you have a masive security hole! Try checking if the ModelState.IsValid in your controller before saving the values.

Now, from what I see you're registering the xVal validation using

<%= Html.ClientSideValidation<Product>("Product") %>

The way it works is it enables client side validation for all controls prefixed with "Product". Your textbox on the other hand has an id of FromPriceInCents

So the solution here would be to do this:

<%= Html.TextBox("FromPriceInCents")%>
<%= Html.ValidationMessage("FromPriceInCents")%>

<%= Html.ClientSideValidation<Product>() %>

UPD3 I updated the post. Fixed the code so that the prefix is not used.

Also, I compiled a working solution that contains a working solution. List, Edit, Create page, string and int properties, and xVal validation.

public class Product
{
    [ScaffoldColumn(false)]
    public int Id { get; set; }

    [Required]
    [Range(1,50)]
    public int PriceInCents { get; set; }

    [Required]
    [StringLength(50)]
    public string Name { get; set; }
}

and on the view

<%= Html.TextBoxFor(model => model.PriceInCents) %>
<%= Html.ValidationMessageFor(model => model.PriceInCents) %>

Here's the download link.. Check it out and tell me if it works http://www.flexlabs.org/download/xValTest

edited Apr 20 '10 at 20:42

answered Apr 18 '10 at 08:03

Artiom Chilaru

11,811
4
41
52

Thanks for the good response, i'll try your solution and let you know. You're right about the server side validation, i indeed still need to fix this. – Rob Apr 19 '10 at 06:55
I tried your solution by adding the prefix to the textbox. But then the validation doesn't work at all. When i use it like this; <%= Html.TextBox("FromPriceInCents")%> <%= Html.ValidationMessage("product.FromPriceInCents")%> <%= Html.ClientSideValidation("product") %> The validation is showing me errors when i enter text in a box expecting numbers. But when i try to submit the page it is still doing a postback, something which i don't expect and want it to do. Got serverside validation working now with Modelstate.IsValid – Rob Apr 19 '10 at 07:40
Ah yes, that's because the Create method could not puck up the values from the form values.. I updated the post with an example – Artiom Chilaru Apr 19 '10 at 08:26
@Artion thanks for the quick response, i tried both your suggestion but it doesn't work :( I found out that where using a button to submit the form, so i updated the question with it. Could this have something to do with the issue? – Rob Apr 19 '10 at 08:55
1

Updated the post with a more correct example + an example project download.. definitely working :) – Artiom Chilaru Apr 20 '10 at 20:43
Thanks Artiom! Your example works just as my application should. Gonna try and fix the problem using your example. I'll let you know! – Rob Apr 22 '10 at 07:05
Got it working! I debugged it all the way so it was equal to your example. The only difference left was that i was using a form which was loaded with jquery, this because i've got a tab oriented interface. Because of this the client side validation wasn't correctly called when submitting the form. So i wrote a little javascript to call this function and this fixed the problem. I removed the prefixes as you suggested. – Rob Apr 22 '10 at 09:57

score 0 · Answer 3 · answered Apr 16 '10 at 14:27

0

Why do you have the Range attribute commented out? With the properties you have specified as long as anything is entered in the textbox it should pass client side validation.

answered Apr 16 '10 at 14:27

mhinton

1,175
1
12
24

The range attribute is an an test. But i'll try putting it back on and see what happens. – Rob Apr 16 '10 at 14:31
OK i tried it, the client side validation is giving this error; Please enter a value between 1 and 2147483647. But in firebug i can see the page is still trying to do an postback, but it returns the error below; 'Object reference not set to an instance of an object.' – Rob Apr 16 '10 at 14:35
Try having your Create action take the object type like this public ActionResult Create(ObjectType newObject) – mhinton Apr 16 '10 at 16:24
The controller is already taking the following parameters public override ActionResult Create(Guid pageId, Guid pluginInstanceId, Product entity, FormCollection collection) – Rob Apr 19 '10 at 07:46

C# mvc2 client side form validation with xval, prevent post

3 Answers3