Question

I have a contact page in mvc . I have a 4 text box in this page and
one text area and i want to give validation using jquery the
text-box id is txtbxName, txtbxCompany, txtbxEmail, txtbxPhone ,and
txtarMessage. when user click on submit button if txtbxName is blank.
i want a message something like this “Please enter your Name!” and so
on. please help me thanks

ContactController.cs 

         public ViewResult Create(string Name, string Company, string Regarding, string Email, string Phone, string Message)
         {
            string body = "Name: " + Name + "<br>" + "\nCompany: " + Company + "<br>" + "Regarding: " + Regarding + "<br>" + "Email: " +
 Email + "<br>" + "Phone: " + Phone + "<br>" + "Message: " + Message;
           try
           {                 MailMessage mail = new MailMessage();                 mail.From = new MailAddress("[e-mail]");
                mail.To.Add("[e-mail]");
                 mail.Subject = "Accept Request";
                 mail.Body = body;
                mail.IsBodyHtml = true;               SmtpClient smtp = new SmtpClient("smtp.gmail.com");
                smtp.Credentials = new System.Net.NetworkCredential("[e-mail]", "1457898");
                smtp.EnableSsl = true;
                 // smtp.UseDefaultCredentials = true;
                 smtp.Send(mail);
             }
             catch (Exception ex)
             {
                 ViewData.ModelState.AddModelError("_FORM", ex.ToString());
             }
             return View();



 Jquery


 $("#btnSubmit").click(function (event) {




         var data = { Name: $("#txtbxName").val(), Company: $("#txtbxCompany").val(), Regarding:
             $("#ddlRegarding").val(), Email: $("#txtbxEmail").val(), Phone: $("#txtbxPhone").val(), Message:
             $("#txtarMessage").val()
         }




           $.ajax({
             type: "POST",
             url: "/Contact/Create",  // the method we are calling
             contentType: "application/json; charset=utf-8",
             data: JSON.stringify(data),

             dataType: "html",
             success: function (result) {
                 $("#txtbxName").val("");
                 $("#txtbxCompany").val("");
                 $("#txtbxEmail").val("");
                 $("#txtbxPhone").val("");
                 $("#txtarMessage").val("");
                 alert(result);
                 // Or if you are returning something
                 alert('I returned... ' + result.WhateverIsReturning);
             },
             error: function (result) {
                 $("#txtbxName").val("");
                 $("#txtbxCompany").val("");
                $("#txtbxEmail").val("");
                 $("#txtbxPhone").val("");
                 $("#txtarMessage").val("");

                 alert('Thanks for sending info');
                 return false;
             }
         });
     });



 Index  .cshtml


 <div class="parteners">
                 <div class="block" style="width: 270px;">
                     <div class="block" style="width: 295px; padding: 3px;">
                         Name :
                     </div>
                     <div class="block" style="width: 320px; padding: 3px;">
                         <input type="text" class="textbox" name="textfield" alt="Type our Name here" />>                         <br />
                   </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         Company :
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                        <input type="text" class="textbox" name="textfield2" />
                    </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         Regarding :
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         <select name="select" class="textbox">
                             <option>General Inquiry</option>
                             <option>Programming Related Question</option>
                             <option>Website Quote Request</option>
                             <option>Feedback</option>
                             <option>Help and Support</option>
                         </select>
                     </div>
                 </div>
                 <div class="block" style="width: 270px;">
                     <div class="block" style="width: 295px; padding: 3px;">
                         Email :</div>
                     <div class="block" style="width: 295px; padding: 3px;">
                        <input type="text" class="textbox" name="textfield3" />
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         Phone :
                     </div>
                     <div class="block" style="width: 295px; padding: 3px;">
                         <input type="text" class="textbox" name="textfield4" />
                     </div>
                 </div>
                 <div class="block" style="width: 600px; padding: 3px;">
                     Enter your Suggestions / Comments / Feedback here :
                 </div>
                 <br />
                 <div class="block" style="width: 600px; padding: 3px;">
                     <textarea class="textarea" name="textarea"></textarea><br />
                     <br />
                 </div>
                 <div class="block" style="width: 600px; padding: 3px;">
                     <input id="Button1" type="Button" value="Submit" />
                 </div>
             </div>

Answer 1

Set class to all the textboxes like below

<input type="text" class="valcheck" title="Name" id="your_name_field_id" name="your_name_field_name" />

do the same for all the 6 textboxes.

$("#btnSubmit").click(function (event) { 

 $(".valcheck").each(function(){

  var id = this.id;
  var field_value = $("#"+id).val();

  if(field_value=="")
  {
   var field_name = $("#"+id).attr('title');
   $("#error_display_div").append("Please enter "+field_name+"<br />");
  }

//Show hide error_display_div accordingly, you can clear out the div using
// $("#error_display_div").html('');

 });
});