javascript - jquery validation not showing error message -

this script code when running code not showing message showing red texbox required field want show error message below text box

(function ($, w, d) {     var jquery4u = {};      jquery4u.util =     {         setupformvalidation: function () {             $("#register-form").validate({                 rules: {                     firstname: "required",                     lastname: "required",                 },                 messages: {                     firstname: "please enter firstname",                     lastname: "please enter lastname",                 },                 submithandler: function (form) {                     form.submit();                 }             });         }     }     $(d).ready(function ($) {         jquery4u.util.setupformvalidation();     });  })(jquery, window, document); 

this view code

<form action="" method="post" id="register-form" novalidate="novalidate">     <div class="col-md-6">         <div class="panel panel-default nobottommargin">             <div class="panel-body" style="padding: 40px;">                 <div class="heading-block fancy-title nobottomborder title-bottom-border">                     <h4>registration</h4>                 </div>                 @using (html.beginform("registration", "account"))                                             {                     @html.antiforgerytoken()                      <div class="form-horizontal">                         @html.validationsummary(true, "", new { @class = "text-danger" })                          <div class="form-group">                             @html.labelfor(model => model.firstname, htmlattributes: new { @class = "control-label col-md-4" })                             <div class="col-md-8">                                 @html.editorfor(model => model.firstname, new { htmlattributes = new { @class = "form-control" } })                                  @html.validationmessagefor(model => model.firstname, "", new { @class = "text-danger" })                             </div>                         </div>                         <div class="form-group">                             @html.labelfor(model => model.lastname, htmlattributes: new { @class = "control-label col-md-4" })                             <div class="col-md-8">  //this model binding in mvc                                                                                                @html.editorfor(model => model.lastname, new { htmlattributes = new { @class = "form-control" } })                                  @html.validationmessagefor(model => model.lastname, "", new { @class = "text-danger" })                             </div>                         </div> 

showing red text box not message

that's because you've told show custom errors , not show property errors

change

@html.validationsummary(true, "", new { @class = "text-danger" }) 

to

@html.validationsummary(false, "", new { @class = "text-danger" }) 

then you'll property errors in summary box in @html.validationmessagefor - should remove those

however

if you're not getting property errors in @html.validationmessagefor either, you've not wired validation use these 2 mvc helpers - you're expecting these don't do.

all validation should both client-side , server-side. applying server side attributes ([required] on viewmodel) , using unobtrusive.js, you'll both automatically, without needing write twice.