Unable to call MVC4 client side validation while using jquery AJAX call

Question

In my MVC view screen, on click of button, i do ajax call through $.ajax and it able to call controller's action method and return the reponse into success event. controller action method's return type is JsonResult and returning Json(object,AllowGEt) I have included jquery file and validation file in _layout file.

Problem: Problem is unable to fire validation on client side.

I have already included - Required annotaion and error message annotation on model object.

Please guide me what is wrong. (it was working fine while doing validation inside BeginForm and button as Submit button and call to action method having return type as ActionResult but, no ajax call.)

Modified to include code:

On `View` on button click event :

      <script type="text/javascript">
     $("#btnJsonSubmit").click(function () {
      var f = JSON.stringify(
           { 'IDValue': objIDValue };
     $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/cPreferences/InsertPreference',
        data: f,
        success: function () {
            alert('Record saved successfully.');
            $('select').prop('selectedIndex', 0);
        },
        failure: function (response) {
            alert('f');
            //console.log('error!!');
        }
        });
     });
   </script>

On Controller's actio method:

   [HttpPost]
    public JsonResult InsertPreference(string IDValue)
    {

       ///code to call services
      return Json(l, JsonRequestBehavior.AllowGet);
     }

View Model object

View MOdel

    using System.ComponentModel;
    using System.ComponentModel.DataAnnotations;
    namespace ViewModel
   {
     public class CampusProgramPreferencesViewModel
     {
      [Required(ErrorMessage = "Selection is required")]
     public IList<LookupItem> DataList { get; set; }
     [Required(ErrorMessage = "Preference is required")]

    public string Preference { get; set; }
    }
     }


  Layout_cshtml

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

I test Your code.it's correct and worked.check your browser console for java script errors — M.Azad
– M.Azad, Commented Jun 25, 2014 at 8:57

Community · Accepted Answer · 2017-05-23 12:10:59Z

0

Please Make sure that you have included the following:

1) Web Config changes:

**

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

**

2) Sequence of the script files i.e:

**

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

**

Further more you can refer the: Use ASP.NET MVC validation with jquery ajax?

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Jun 24, 2014 at 12:00

khush

1611 gold badge3 silver badges9 bronze badges

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

2 Comments

user3711357 Over a year ago

My controller's action is JSONRESULT. Updated question with details, please guide,its not working. web.config already contains both lines.

khush Over a year ago

Please use Ajax.Begin form, as it seems that a form tag is not getting rendered on your page, b'coz MVC validation may work if you wrap the page objects in the form tag.

Collectives™ on Stack Overflow

Unable to call MVC4 client side validation while using jquery AJAX call

On `View` on button click event :

On Controller's actio method:

View Model object

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

On View on button click event :

On Controller's actio method:

View Model object

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

On `View` on button click event :