jquery - Client side validation not working -

jquery - Client side validation not working -

i implemented client side validation i.e, required attributes specified in model , html.validationmesssage in .cshtml , referenced jquery validator , working fine when click on save button. when implement onclick event of button ajax call, validation seems not working. tried using isvalid no luck.

please find below code.

controller

[httppost] public actionresult addclient(clientmodel clientdata) { var clientobj = new metadata.client.service.client(); string successmessage = string.empty; clientobj.clienttype = new metadata.client.service.clienttype(); clientobj.clientname = clientdata.client.clientname; clientobj.clientcode = clientdata.client.clientcode; clientobj.clienttype.clienttypeid = clientdata.clienttypeselectid; seek { clientobj = clientdata.addnewclient(clientobj); } grab (exception ex) { homecoming new contentresult { content = ex.message, contenttype = "application/json" }; } homecoming new contentresult { content = successmessage, contenttype = "application/json" }; //return redirecttoaction("index"); } jquery - added below references. <script src="../../scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="../../scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js" type="text/javascript"></script> $("#addform").validate( { submithandler: function (form) { var clientname = $('#client_clientname').val(); var clienttypeid = $('#clienttypeselectid').val(); var clientcode = $('#client_clientcode').val(); $.ajax({ type: "post", async: false, url: "/client/addclient", cache: false, data: { "clientname": clientname, "clienttypeid": clienttypeid, "clientcode": clientcode }, datatype: "json", error: function (request) { alert(request.responsetext); }, success: function (result) { //alert('successfully inserted client'); $.ajax({ url: "/client/clientgrid", type: 'get', datatype: 'json', success: function (data) { $('#grid').html(data); //alert('got here data'); }, error: function () { //alert('something bad happened'); } }); $('#myclientdialogcontainer').dialog('close'); } }); homecoming false; } }); model public class client { public int clientid { get; set; } [required(errormessage = "please come in client name")] [display(name = "client name")] public string clientname { get; set; } public clienttype clienttype { get; set; } public statustype statustype { get; set; } //[stringlength(100, errormessage = "the {0} must @ to the lowest degree {2} characters long.", minimumlength = 6)] [required(errormessage = "please come in client code")] [datatype(datatype.text)] [display(name = "client code")] public string clientcode { get; set; } //[stringlength(100, errormessage = "the {0} must @ to the lowest degree {2} characters long.", minimumlength = 6)] [datatype(datatype.text)] [display(name = "client status type name")] public string clientstatustypename { get; set; } //[stringlength(100, errormessage = "the {0} must @ to the lowest degree {2} characters long.", minimumlength = 6)] [datatype(datatype.text)] [display(name = "client status code name")] public string clientstatuscodename { get; set; } [display(name = "client type id")] public int clienttypeid { get; set; } } validation code <div class="editor-field"> <span> @html.validationmessagefor(c => c.client.clientname) <div class="row"></div> <span class ="label"> @html.labelfor(c => c.client.clientname, "client name :")</span> @html.textboxfor(c => c.client.clientname, new { style = "width:50%; height:20px;" }) </span> </div> <div class="editor-field"> <span> @html.validationmessagefor(m => m.clienttypeselectid) <div class="row"></div> <span class ="label">@html.labelfor(m => model.client.clienttype.clienttypename, "client type :")</span> @html.dropdownlistfor(m => m.clienttypeselectid, (selectlist)viewbag.clienttypelistcombo, " ", new { style = "width:52%" }) </span> </div> <div class="editor-label"> <span> @html.validationmessagefor(m => m.client.clientcode) <div class="row"></div> <span class="label">@html.labelfor(m => m.client.clientcode, "client code :")</span> @html.textboxfor(m => m.client.clientcode, new { style = "width:50%; height:20px;" }) </span> </div>

please can help.

instead of submitting form when button clicked, seek .submit() event of form. wrap input elements within html form tag. should serialize form , submit server instead of taking input values 1 one.

$('#myform').submit(function (e) { // prevent default submit ajax e.preventdefault(); $.ajax({ /* ajax stuff goes here */ }); });

this way won't bypass validation.

jquery asp.net-mvc-4 jquery-validate unobtrusive-validation