[RESOLVED]Ajax.BeginForm() and validaiton message?

How to display the validation message of the Model while using Ajax.BeginForm() ?

It does not matter between Html.BeginForm and Ajax.BeginForm. while declaring validation

1) Please add validation message in Model class as in Html.BeginForm validation

2) Then specify modal dialog name as UpdateTargetId in Ajax.BeginForm

Ajax.BeginForm("Action", "Controller", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "modal-dialog-name"})

If you are loading controls after the Ajax post and want to enable the validations after the post, you need to manually invoke the validator as shown below

$.validator.unobtrusive.parse('form');

Here is the code I used earlier for this

Ajax.BeginForm(new AjaxOptions() { UpdateTargetId = "AjaxViewContainer", OnSuccess = "RegisterAjaxEvents();", LoadingElementId = "LoadingDiv" });

JavaScript

function RegisterAjaxEvents() {
    $.validator.unobtrusive.parse('form');
    //remaining code
}

Hi abhi0410,

Thanks for your post.

First You enabled validation in the web.config page:

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

And you can follow these steps:

Unobtrusive AJAX Form Validation in ASP.NET MVC

http://www.codeproject.com/Articles/460893/Unobtrusive-AJAX-Form-Validation-in-ASP-NET-MVC

More information:

Ajax.BeginForm and validation

Ajax.BeginForm not working with Html.ValidationSummary

If there’s anything else I can do for you regarding this matter, please feel free to post it in this forum.

Best Regards,

Eileen

Hello
pprasannak,

i tried but your solution little different.

I have partial view with save button but on first click my server validation occurs.

And when i click second time then i get those error message in my view.

My partial view is loaded dynamically in a view based on click of button present in the view.

<script type="text/javascript">
    function RegisterAjaxEvents() {
        $.validator.unobtrusive.parse('form');
    }
</script>

@using (Ajax.BeginForm("Add", "Account", new AjaxOptions() { UpdateTargetId = "messageid", HttpMethod = "Post", OnSuccess = "RegisterAjaxEvents();" , InsertionMode=InsertionMode.Replace}))
{
    @Html.AntiForgeryToken()
    <div>
        @Html.ValidationSummary(true)
        <table>
            <tr>
                <td>
                    @Html.LabelFor(model => model.name, new { @class = "label" })
                </td>
                <td>
                    @Html.TextBoxFor(m => m.name, new { @class = "textbox" })
                    @Html.ValidationMessageFor(model => model.name, string.Empty, new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td>
                      @Html.LabelFor(model => model.Userid, new { @class = "label" })
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Userid, new { @class = "textbox" })
                    @Html.ValidationMessageFor(model => model.Userid, string.Empty, new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(model => model.Email, new { @class = "label" })
                </td>
                <td>
                    @Html.TextBoxFor(model => model.Email, new { @class = "textbox" })
                    @Html.ValidationMessageFor(model => model.Email, string.Empty, new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td>
                    
                </td>
                <td>
                    <div id="messageid"></div>
                    <div>
                        <input type="submit" value="Save" class="btn btn-default" />
                    </div>
                </td>
            </tr>
        </table>
    </div>
}

Hi
Eileen ni

Can you please look into my code snippet and guide me why the validation fires on second click and not in first click?

Thanks

abhi0410

OnSuccess = "RegisterAjaxEvents();"

The validation is firing second time because you are explicitly calling the RegisterAjaxEvents function on the success of the first button click.

For some reason your initial loading is not registering the validator. As a work around try this

<script type="text/javascript">
    function RegisterAjaxEvents() {
        $.validator.unobtrusive.parse('form');
    }

  RegisterAjaxEvents() // call the function manually
</script>

Also move this javascript to the end of the page (after end of the BeginForm)

Hi
pprasannak
,

Thanks.

It works by calling explicitly. but what could be the reason that validator is not registered in initial loading?

And how to highlight the textbox for which the error has occurred?

Ok i could add validation color to the textbox by simply passing the below css pattern to my css file

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

Rest was taken care by jquery.

Leave a Reply