mVC의 AJAX 팝업에서 사용자 정의 유효성 검사

custom validation을 AJAXpopup에서 MVC으로 수행해야합니다. CustomValidator을 만들고 IsValid() 메소드를 재정의했습니다. 문제는 팝업이 사용자 지정 유효성 검사를 올바르게 렌더링하지 않는다는 것입니다.mVC의 AJAX 팝업에서 사용자 정의 유효성 검사

내 코드 :

_Layout.cshtml

<!DOCTYPE html> 
<html> 
<head> 
    @Styles.Render("~/Content/css") 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" /> 
    @Scripts.Render("~/bundles/jquery") 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <script src="~/Scripts/jquery.validate.min.js"></script> 
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/jquery.ajax.unobtrusive/3.2.4/jquery.unobtrusive-ajax.min.js"></script> 
    @Scripts.Render("~/bundles/modernizr") 
    <script> 
     $(function() { 
      $("#modalDialog").dialog({ 
       autoOpen:false, 
       width: 600, 
       height: 300, 
       modal: true 
      }); 
      $("#opener").click(function() { 
       $("#modalDialog").dialog("open"); 
      }); 
     }); 

     function OnSuccess(response) 
     { 
      $("#modalDialog").text(response); 
     } 
    </script> 
</head>

Index.cshtml :

@model MvcPopup.Controllers.HomeController.SomeModel 
@{ViewBag.Title = "Home Page";} 
<p>This is page content !!!</p> 
<button id="opener">Open Dialog</button> 
<div id="modalDialog" title="Basic Modal Dialog"> 
    <p>This is a basic modal dialog</p> 
    @using (Ajax.BeginForm("Index", new AjaxOptions { UpdateTargetId = "ID", OnSuccess = "OnSuccess" })) 
    { 
    <div> 
     <fieldset> 
      <legend>Info</legend> 
      @Html.LabelFor(m => m.EmailAddress) 
      @Html.TextBoxFor(m => m.EmailAddress) 
      @Html.ValidationMessageFor(m => m.EmailAddress) 
      <input type="submit" value="Submit" /> 
     </fieldset> 
    </div> 
    } 
</div>

HomeController.cs :

public class HomeController : Controller 
    { 
     public class SomeModel 
     { 
      [CustomValidator] 
      [Display(Name = "Email address")] 
      public string EmailAddress { get; set; } 
     } 
     public ActionResult Index() 
     { 
      var model = new SomeModel(); 
      return View(); 
     } 
     [HttpPost] 
     public ActionResult Index(SomeModel model) 
     { 
      if (ModelState.IsValid) 
      { 
       return PartialView(); 
      } 
      return PartialView(); 
     }

CustomValidator.cs :

public class CustomValidator : ValidationAttribute 
    { 
     protected override ValidationResult IsValid(object value, ValidationContext validationContext) 
     { 
      if (value != null) 
      { 
       if (value.ToString().Contains("X")) 
       { 
        return ValidationResult.Success; ; 
       } 
       else 
       { 
        return new ValidationResult("Enter an email address with letter X"); 
       } 
      } 
      else 
      { 
       return new ValidationResult("" + validationContext.DisplayName + " is mandatory.Please enter it."); 
      } 
     } 
    }

Custom Validations이 해고되었지만 팝업 페이지의 렌더링이 약간 비뚤어졌습니다. 트리거됩니다 이제

, 내가, 내가 "Email Address is mandatory. Please enter it.를"내 사용자 지정 유효성 검사를 볼 수 있습니다 이메일 textbox에 값을 입력하고 Submit 클릭하지 않고 팝업 페이지에 분명하다 : 아래와 같이 나타납니다 아래 :

내 말은, 그것의 사용자 지정 유효성 검사 이메일 textbox 근처에 나타납니다 물건이 popup과 같아야 꽤 분명. 도와주세요.

Validations

편집은 popup 페이지에 표시하지만, 내용이 다소 비뚤어진입니다. I mean the content of the parent page too appear on the popup page. 아래의 스냅 샷. 그것을 제거하는 방법? 도와주세요.

출처

2016-06-22 Anurag

'$ ("# modalDialog") HTML (응답) 단지' "X"를 보장하기 위해'RegularExpressionAttribute'을 사용하지 왜'(', 텍스트()'하지 않음) –

'포함 -이 이 속성에는 실제 포인트가 없습니다. –

@StephenMuecke :이 X 포함은 데모 용입니다.다른 유효한 종류의 사용자 지정 유효성 검사를 할 수 있습니다. – Anurag

이 종종 전형적인 볼 꽤 시간입니다. 유효성 검사가 실행되지 않은 이유는 모달 대화 상자와 같은 내용이 동적이어서 나중에 페이지에 추가되거나 나타나기 때문입니다. 양식 유효성 검사는 페이지에 동적으로 추가 된 컨트롤의 유효성을 검사하기 위해 양식을 다시 구문 분석해야합니다.

당신은 그래서 당신이 양식을 구문 분석하는 데 사용할 수 있습니다 설치 OnSuccess() 있습니다.

function OnSuccess() 
{ 
    if($.validator) 
    { 
     $.validator.unobtrusive.parse("form"); 
    } 

    $("#modalDialog").html(response); 
}

Visit here 자세한 내용은

이 솔루션은 유효성 검사가 정상적으로 작동한다고 가정합니다. .

출처

2016-06-22 11:28:04 Rohit416

유효성 검사 속성은 IClientValidatable을 구현하지 않으므로 재분할이 필요하지 않습니다 (단지 무의미한 추가 오버 헤드) –

이 경우 의도 한대로 작동하지 않습니다. – Rohit416

@ Rohit .. 시도해보십시오. 감사합니다. – Anurag

mVC의 AJAX 팝업에서 사용자 정의 유효성 검사

답변

관련 문제