使用 jQuery 对 MVC 中的文本框应用验证

Question

我在 mvc 中有一个联系页面。我在此页面中有一个 4 文本框，并且 一个文本区域，我想使用 jquery 进行验证 文本框 id 是 txtbxName、txtbxCompany、txtbxEmail、txtbxPhone 和 txtar消息。如果 txtbxName 为空，则当用户单击提交按钮时。 我想要这样的消息“请输入您的姓名！”所以 在。请帮帮我谢谢

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("g@technosys.com");
                mail.To.Add("p@technosys.com");
                 mail.Subject = "Accept Request";
                 mail.Body = body;
                mail.IsBodyHtml = true;               SmtpClient smtp = new SmtpClient("smtp.gmail.com");
                smtp.Credentials = new System.Net.NetworkCredential("g@technosys.com", "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

为所有文本框设置类，如下所示

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

对所有 6 个文本框执行相同操作。

$("#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('');

 });
});

Answer 2

您应该查看 jQuery 验证插件：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 3

您应该考虑使用这样的 ViewModel：

public class MessageVM 
{

    public string CompanyName {get;set;}

    [Required]
    public string Name {get;set;}

    public string Regarding {get;set;}

    public string Message {get;set;}

    [Required]
    public string Email {get;set;}
}

使用DataAnnotations。您在视图中使用它来绑定如下：

@Model Your.Namespace.ViewModels.MessageVM
@using(Html.BeingForm("create"))
{
    @Html.LabelFor(x => x.Name)
    @Html.TextBoxFor(x => x.Name)
    @Html.LabelFor(x => x.CompanyName)
    @Html.TextBoxFor(x => x.CompanyName)
    @Html.LabelFor(x => x.Regarding)
    @Html.TextBoxFor(x => x.Regarding)
    @Html.LabelFor(x => x.Email)
    @Html.TextBoxFor(x => x.Email)
    @Html.LabelFor(x => x.Message)
    @Html.TextBoxFor(x => x.Message)
    <button type="submit">Send!</button>
}

然后你可以在你的控制器上设置一个类似下面的方法

public ActionResult Create(MessageVM message) 
{
    if (!ModelState.IsValid)
    {
        return View(message);
    }
    //else do whatever you need, send the email etc.
}

多一点here