2013-02-25 63 views
0

我想在我的某個視圖中對電子郵件字段進行驗證。客戶端驗證在我的MVC3應用程序中不起作用

但不幸的是它不工作。有人可以幫助我嗎?

這是我的HTML。

<!DOCTYPE html> 
<html class="no-js"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>About SJ Electrical Ltd</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <script src="/Content/js/vendor/modernizr-2.6.2.min.js"></script> 
</head> 
<body> 
    <div id="main"> 
<section class="main-content"> 
<form action="/info/contact" method="post"> <div id="contact-content"> 
     <article class="double-columned"> 
      <header></header> 
      <img id="map-image" src="/Content/img/map.png" /> 
      <p> 
       <span class="bold">Request a call Back 
       </span> 
      </p> 
      <div class="one-third-column"> 
       <label for="Name">Name:</label> 
       <input class="text-box single-line" id="Name" name="Name" type="text" value="" /> 

       <label for="Email">Email Address:</label> 
       <input class="text-box single-line" data-val="true" data-val-required="Email address required." id="Email" name="Email" type="email" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
      </div> 
      <div class="one-third-column"> 
       <label for="Message">Comments:</label> 
       <textarea cols="20" id="Message" name="Message" rows="4"> 
</textarea> 
       <div> 
        <input type="button" id="btnSendMessage" value="Submit" /> 
       </div> 
      </div> 
     </article> 
    </div> 
</form> 
     </section> 
    </div> 
    <script src="/Scripts/jquery-1.7.1.js"></script> 
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script> 
<script src="/Scripts/jquery.validate.js"></script> 
<script src="/Scripts/jquery.validate.unobtrusive.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      $("#btnSendMessage").on("click", sendCallBackRequest); 
     }); 

     function sendCallBackRequest() { 

       $.ajax({ 
        type: 'POST', 
        url: '/Contact/SendJSonMessage', 
        //data: $('#form').serialize(), 
        data: contactRequest, 
        contentType: "application/json; charset=utf-8", 
        traditional: true, 
        success: sentMessage, 
        error: errorInSendingMessage 
       }); 
     } 

    </script> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="~/content/js/vendor/jquery-1.9.0.min.js"><\/script>')</script> 
    <script src="/content/js/plugins.js"></script> 
    <script src="/content/js/main.js"></script> 
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> 
    <script type="text/javascript"> 
     var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']]; 
     (function (d, t) { 
      var g = d.createElement(t), s = d.getElementsByTagName(t)[0]; 
      g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'; 
      s.parentNode.insertBefore(g, s); 
     }(document, 'script')); 
    </script> 
</body> 
</html> 

這是我的模型。

public class UserMessage 
    { 


     [Required(AllowEmptyStrings = false,ErrorMessage = "Email address required.")] 
     [DataType(DataType.EmailAddress, ErrorMessage = "Invalid Email Address")] 
     [Display(Name = "Email Address:")] 
     public string Email { get; set; } 

     [AllowHtml] 
     [Display(Name = "Comments:")] 
     public string Message { get; set; } 
} 
+0

顯示加載頁面時呈現的整個標記。 – 2013-02-26 05:03:21

+0

@karthik:用完整的標記更新了我的問題。 – Naresh 2013-02-26 14:29:47

回答

0

我想你只需要添加[EmailAddress]驗證屬性。

[DateType]實際上並未進行驗證。認爲它只是添加了HTML輸入類型屬性。

[Required(AllowEmptyStrings = false, ErrorMessage = "Email address required.")] 
[DataType(DataType.EmailAddress)] 
[EmailAddress] 
[Display(Name = "Email Address:")] 
public string Email { get; set; }