Validate.unobtrusive and validate jQuery libraries

Question

기본 클라이언트 및 서버 유효성 검사에 표준 모델 유효성 검사 속성을 사용하는 MVC 3 응용 프로그램을 빌드하고 있습니다. 그러나 또한 헤더에있는 양식이 있고 jQuery 유효성 검사 플러그인을 사용하여 클라이언트 유효성 검사를 수행합니다.

난이도가 낮은 라이브러리를 프로젝트에 추가하면 validate 플러그인을 사용하는 헤더 양식이 실행되지 않고 계속 게시됩니다. 눈에 잘 띄지 않는 라이브러리가 포함되어 있지 않으면 헤더의 유효성이 유효하지만 모델 유효성 검사가 중지됩니다.

내가 뭘 잘못하고 있는지 알기!

편집 기본적으로 내가 헤더에 로그인 양식을 가지고있다. 로그인이 가능한 로그인 페이지도 있습니다. 로그인 페이지는 모델에 묶여 있지만 헤더의 양식은 HTML이 아닙니다. 두 양식 모두 jQuery .ajax를 통해 동일한 Controller/Action을 호출합니다.

나는 눈에 거슬리지 않는 라이브러리를 포함하고 있기 때문에 호출되지 않는 .ajax 메서드를 사용할 수있는 기능을 잃어 버렸습니다.

작동하도록 포함 된 코드가 있지만 유효성 검사가 완료된 후에도 여전히 작업을 게시하거나 수행 할 수 없습니다.

내 헤더 형식은 다음과 같습니다

<form id="frmHeaderLogin" action=""> 
<table id="LoginBox" title="Login"> 
    <tr> 
     <td>UserName</td> 
     <td><input type="text" id="Username" name="Username" /></td> 
    </tr> 
    <tr> 
     <td>Password</td> 
     <td><input type="password" id="Password" name="Password" /></td> 
    </tr> 
    <tr> 
    <td colspan="2"><input type="submit" value="Login" id="btnHeaderLogin" name="btnHeaderLogin" /></td> 
    </tr> 
</table> 
</form> 

내가 클라이언트 입력의 유효성을 검사 한 후 데이터를 매개 변수로 JSON 객체를 생성 한 후 서버에이 제출 것 버튼을 제출에 대한 클릭 이벤트가 있습니다. 서버의 응답은 JSON 객체이기도합니다. 이 양식은 모든 페이지에있을 예정이므로 레이아웃 파일에 있습니다.

주요 로그인 페이지/뷰는 다음과 같이 간단한 형식은 다음과 같습니다

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "MainLoginForm" })) 
{ 
<div> 
    <fieldset> 
     <p style="color:Red;font-size:medium">@ViewData["Message"]</p> 
     <legend>Login</legend> 
     <div class="editor-label"> 
     @Html.LabelFor(m => m.UserName, "EmailId") 
     </div> 
     <div class="editor-field"> 
     @Html.TextBoxFor(m => m.UserName) 
     @Html.ValidationMessageFor(m => m.UserName) 
     </div> 
     <div class="editor-label"> 
     @Html.LabelFor(m => m.Password, "Password") 
     </div> 
     <div class="editor-field">   
     @Html.PasswordFor(m => m.Password) 
     @Html.ValidationMessageFor(m => m.Password) 
     </div> 
     <p> 
     <input type="submit" id="btnMainLogin" value="Login" /> 
     </p> 
    </fieldset> 
</div> 
} 

이 또한 jQuery를가 아약스 방법을 발사 이벤트를 클릭하고 위의 서버에 JSON 객체를 게시있다. 두 인스턴스 모두 JSON 객체를 반환합니다.

나는이 시점에서 클라이언트와 서버 유효성 검사를 사용할 수 있도록 레이아웃 파일에있는 헤더 로그인에 동일한 모델을 사용할 수 있습니까? 다음

는

유효성 검사 통과 후 내가 (사용 jquery.validate)를 사용 하였다 submitHandler의 예입니다

$("#formname").validate({ 
    // ..... 
     // ..... 
     submitHandler: function() { 
      var JSONData = new Object(); 
      $(':text, :password', $("table[id$='LoginBox']")).each(function() { 
       JSONData[$(this).attr("id")] = $(this).val(); 
      }); 

      $.ajax({ 
       type: "POST", 
       url: "/Controller/Action", 
       data: "{'Login': '" + JSON.stringify(JSONData) + "'}", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function (result) { 
        var response = $.parseJSON(result); 
        alert("Header Login Success!"); 
       }, 
       error: function (xhr, status, error) { 
        alert(xhr.statusText + " - ReadyState:" + xhr.readyState + "\n" + "Status: " + xhr.status); 
       } 
      }); 
     } 
    )}; 

Answer 1

당신은 당신이 사용자 정의 JQuery와 유효성 검사 규칙에 마이크로 소프트 눈에 거슬리지 검증 스크립트를 혼합하려면 동일한 페이지에 작성하면 jquery 유효성 검사 규칙을 기존 양식 요소에 추가해야합니다. 다음의 예제를 보자 :

public class MyViewModel 
{ 
    [Required] 
    public string Foo { get; set; } 

    public string Bar { get; set; } 
} 

컨트롤러 :

public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(new MyViewModel()); 
    } 

    [HttpPost] 
    public ActionResult Index(MyViewModel model) 
    { 
     return View(model); 
    } 
} 

보기 : 푸 필드에 필수 속성이 필요하고 우리는 사용자 정의 JQuery와 유효성 검사를 정의하게하는 방법

@model MyViewModel 

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#Bar').rules('add', { 
      required: true, 
      messages: { 
       required: 'Bar is required' 
      } 
     }); 
    }); 
</script> 

@using (Html.BeginForm()) 
{ 
    <div> 
     @Html.EditorFor(x => x.Foo) 
     @Html.ValidationMessageFor(x => x.Foo) 
    </div> 

    <div> 
     @Html.EditorFor(x => x.Bar) 
     @Html.ValidationMessageFor(x => x.Bar) 
    </div> 

    <button type="submit">OK</button> 
} 

공지 사항 Bar 필드에 대한 규칙.

그리고 여기에 양식이 제출 될 때 결과이고 2 개 필드는 비어 있습니다 : 당신은 물론 모든 필드에서 사용자 정의 규칙의 수를 정의 할 수

.