asp.net mvc 3 unobstrusive validation issue

Question

I'm trying to make some Category entity adding form with unobstrusive validation on client side.

Here is my entity:

public class Category
{
    public Int32 Id { get; set; }

    [DisplayName("Alias")]
    [Required(AllowEmptyStrings = false, ErrorMessage = "Have to complete")]
    [StringLength(100, ErrorMessage = "asdasdasd", MinimumLength = 3)]
    public String Name { get; set; }

    [DisplayName("Name1")]
    [Required(AllowEmptyStrings = false, ErrorMessage = "Have to complete")]
    public String DisplayName { get; set; }

    [DisplayName("Name2")]
    [Required(AllowEmptyStrings = false, ErrorMessage = "Have to complete")]
    public String DisplayNameTZK { get; set; }

    [DisplayName("Url")]
    [DataType(DataType.Url, ErrorMessage = "Url")]
    public String Uri { get; set; }

    public Guid AddingGuid { get; set; }

    public Boolean IsActive { get; set; }

   ...
}

Here is my view:

@model HSDT.Models.Entities.Category

@{
    Html.EnableUnobtrusiveJavaScript();
    Html.EnableClientValidation();
}

@using (Html.BeginForm("", "", null, FormMethod.Post, new { id = "addCategoryForm", name = "addCategoryForm" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false)

    <fieldset>
        <legend>Category</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DisplayName)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DisplayName)
            @Html.ValidationMessageFor(model => model.DisplayName)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.DisplayNameTZK)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.DisplayNameTZK)
            @Html.ValidationMessageFor(model => model.DisplayNameTZK)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Uri)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Uri)
            @Html.ValidationMessageFor(model => model.Uri)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.AddingGuid)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.AddingGuid)
            @Html.ValidationMessageFor(model => model.AddingGuid)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.IsActive)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.IsActive)
            @Html.ValidationMessageFor(model => model.IsActive)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Now I left all my inputs emty and tried to validate this form to get the errors shown in my model using:

$("#addCategoryForm").validate().valid()

But I get true(and no errors) as a result, but should be false because in the data annotation I added [Required] attribute for few fields. What I'm doing wrong?

Thanks for any advance.

EDIT-1

Here is my config:

  <appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

Here is references:

    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

why are you calling `$("#addCategoryForm").validate().valid()`? the submit of the form should validate the input's. Or is there some missing js in the question? — Liam, Jun 03 '13 at 11:19
I'm opening my site in google chrome and write it in the console — Maris, Jun 03 '13 at 11:21
I think your js is wrong try `$("#addCategoryForm").valid()` — Liam, Jun 03 '13 at 11:22
It appears you can't fire this direct from js. see here http://stackoverflow.com/questions/6301492/net-mvc-3-trigger-other-than-submit-button-unobtrusive-validation. You need to actually submit the form — Liam, Jun 03 '13 at 11:29
sorry, that statement is wrong, thats what you get for replying before going on lunch...you can and .valid() is the way to do it. Could be the console doesn't fire it correctly. — Liam, Jun 03 '13 at 12:01
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/31164/discussion-between-maris-and-liam) — Maris, Jun 04 '13 at 06:22

score 1 · Answer 1 · answered Jun 03 '13 at 11:12

1

Did you add the js-files in the correct order?

<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

And in webconfig:

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

answered Jun 03 '13 at 11:12

Lasse Edsvik

9,070
16
73
109

All the reference was added! – Maris Jun 03 '13 at 11:19
Do you have something like "if(ModelState.IsValid)" in postback action so the validation is executed? – Lasse Edsvik Jun 03 '13 at 11:23
I didn't do any request to server-side. The problem is in client-side-validation. – Maris Jun 03 '13 at 11:24
what if you use: @using (Ajax.BeginForm(new AjaxOptions { UpdateTargetId = "div-outside-form-id" })) – Lasse Edsvik Jun 03 '13 at 11:29
I dont want to use server-side validation! I want that my data being validated in the client side using unobstructive validation – Maris Jun 03 '13 at 11:53

score -1 · Answer 2 · answered Jun 03 '13 at 11:55

-1

Remove the following from your view

$("#addCategoryForm").validate().valid()
Html.EnableUnobtrusiveJavaScript();
Html.EnableClientValidation();
@Html.ValidationSummary(false)

Add the following js-files to your view :

<script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>

Use

<button type="submit">Create</button>

in place of

<input type="submit" value="Create" />

Add the Web-config part as described by @Lasse . This will lead you to model validation throwing validation error if any.

answered Jun 03 '13 at 11:55

Shalin Jirawla

489
1
5
24

I want to submit form though the Ajax not the simple form submitting! – Maris Jun 03 '13 at 12:55
I want to call the jquery validation anywhere! – Maris Jun 03 '13 at 12:56
@Maris can you be more specific about your issue related to ajax? – Shalin Jirawla Jun 03 '13 at 13:12
I have the form I want: 1) Validate the data though the Jquery 2) If there is some errors -> display the errors 3) If there is no errors -> submit the data using $.post(...). - will refresh the whole page, but I dont want to do it! – Maris Jun 03 '13 at 13:18

asp.net mvc 3 unobstrusive validation issue

2 Answers2