1

I am creating an action/view in ASP.net MVC that I would like to POST using AJAX / jQuery. I am using Fluent Validation for the validation in my view models.

Is it possible to have client side validation when I do this? What would the script look like in order to trigger this client side validation using fluent validation?

Do I create a regular form and create a submit event using jquery and call something or would I just Ajax.BeginForm() instead?

4
  • refer to this post on SO stackoverflow.com/questions/4713985/… Oct 3, 2011 at 18:03
  • 1
    @patel.milanb This post is not talking about an AJAX form using jQuery. I have client side validation working fine on a regular page that is not being submitted via AJAX. I am wondering if there is anything special I need to do to wire this up for a jQuery AJAX form submission...or if it is even possible to do so.
    – Dismissile
    Oct 3, 2011 at 18:08
  • submitting form via ajax and validating the form using jquery? is that what you looking for? Oct 3, 2011 at 18:58
  • I thought the question was clear. I want to know how I can get Fluent Validation working when submitting the form via AJAX and jQuery. I am using the Fluent Validation library. It works fine in a regular form post. How do I get it to work using an AJAX form.
    – Dismissile
    Oct 3, 2011 at 19:28

2 Answers 2

2

I use the jQuery unobtrusive validation with data annotations but it looks like you need the same settings as me (the first two options below) plus another step:

  • Enable client validation in your view or web.config
  • Enable unobtrusive validation in your view or in web.config
  • Add the FluentValidationModelValidatorProvider to the ModelValidatorProviders collection

For the first two, see Enabling Client-Side Validation. For the last one see Fluent Validation: Integration with ASP.NET MVC.

If you want to submit the form via AJAX, you can trigger the validation on the whole form with $('#form_selector').valid() or on an individual input with $('#input_selector').valid(). The calls to valid() return true if the validation is successful (and false if not).

2
  • So what would your script look like in your view to submit the form via ajax? Is there something you would need to call to trigger the validation?
    – Dismissile
    Oct 3, 2011 at 20:40
  • Ah! Yes, you can call either $('#form_selector').valid() to validate the whole form or $('#field_selector').valid() to validate a specific input. The valid() call will return true or false. Updated answer to include this -- I misunderstood too.
    – Cymen
    Oct 3, 2011 at 20:42
0

Fluent Validation is a server-side validation library. Because of this, Fluent Validation supports some basic client-validations (like required, maxlength etc.) You can't use all server-side rules on client-side.

If you want to add fully client-side support to Fluent Validation, you need to add one more library to your project. Form Helper can be a solution for your problem.

https://github.com/sinanbozkus/FormHelper

You need to create your forms like this:

var formConfig = new FormConfig(ViewContext)
{
    FormId = "ProductForm",
    FormTitle = "New Product",
    BeforeSubmit = "ProductFormBeforeSubmit", // optional
    Callback = "ProductFormCallback" // optional,
};

// <form id="@formConfig.FormId" asp-controller="Home" asp-action="Save"
// ...

@await Html.RenderFormScript(formConfig)

After that you need to add [FormValidator] attribute to your action.

[HttpPost, FormValidator]
public IActionResult Save(FormViewModel viewModel)

Now all Fluent Validation rules work on client-side.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.