MVC 4 클라이언트 측 유효성 검사가 작동하지 않음

MVC 4 클라이언트 측 유효성 검사가 작동하지 않음

---

누구든지 내 MVC 4 응용 프로그램에서 클라이언트 측 유효성 검사가 작동하지 않는 이유를 말할 수 있습니까?

_layout.schtml

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

내 web.config에는 다음이 있습니다.

<appSettings>
   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

내 login.cshtml 페이지에는 다음이 있습니다.

@using (Html.BeginForm())
{
    <div class="formscontent">

        <ol>
            <li>
                @Html.LabelFor(x => x.AgreementNumber)
                <br />
                @Html.TextBoxFor(x => x.AgreementNumber, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.AgreementNumber)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.UserName)
                <br />
                @Html.TextBoxFor(x => x.UserName, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.UserName)
                <br />
                <br />
            </li>
            <li>
                @Html.LabelFor(x => x.Password)
                <br />
                @Html.PasswordFor(x => x.Password, new { size = "30" })
                <br />
                @Html.ValidationMessageFor(m => m.Password)
                <br />
                <br />
            </li>
        </ol>

    </div>

    <ol>
        <li>
            @Html.CheckBoxFor(m => m.RememberMe)
            @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
        </li>
    </ol>

    <br />

    <input class="mainbutton" type="submit" value="@Model.Localisation.TranslateHtmlString("LogonBtn")" /><br />
    <div style="text-align: left; padding: 0 5px 5px 10px;">
        Forgot login-info? clik <a class="link" href="@Url.Action("Index", "Credentials")">here.</a>
    </div>

}

로그인 페이지 하단에서 :

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
}

내 브라우저에서 JavaScript가 활성화되어 있습니다. Visual Studio 클라이언트 유효성 검사의 MVC 4 템플릿 프로젝트에서 제대로 작동합니다.

페이지 소스를 볼 때 로그인 페이지에서 응용 프로그램을 실행하면 다음과 같이 렌더링됩니다.

<label for="AgreementNumber">number</label>
<br />
<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />
<br />
<span class="field-validation-valid" data-valmsg-for="AgreementNumber" data-valmsg-  replace="true"></span>

그리고 아래에 :

<script src="/BMWebsite/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.inline.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.js"></script>
<script src="/BMWebsite/Scripts/jquery.validate.unobtrusive.js"></script>

내 모델 속성에 주석이 추가되었습니다.

public class LogonModel : ModelBase
{
    [MyRequired("AgreementNumberRequiredProperty")]
    [MyDisplay("AgreementNumberLabel")]
    public string AgreementNumber { get; set; }

    [MyRequired("UserNameRequiredProperty")]
    [MyDisplay("UserNameLabel")]
    public string UserName { get; set; }

    [MyRequired("PasswordRequiredProperty")]
    [DataType(DataType.Password)]
    [MyDisplay("PasswordLabel")]
    public string Password { get; set; }

    [MyDisplay("RememberMeCheckBox")]
    public bool RememberMe { get; set; }
}

MyRequired일반 RequiredAttribute에서 파생 된 클래스입니다. 그 이유는 클래스 의 FormatErrorMessage(string name)메서드를 재정 의하여 오류 메시지가 지역화되기 때문입니다 RequiredAttribute. 그리고 잘 작동합니다-내 레이블과 오류 메시지가 현지화되었습니다.

MyRequired.cs

public class MyRequiredAttribute : RequiredAttribute
{
    private readonly string _errorMessagekey;

    public MyRequiredAttribute(string errorMessage)
    {
        _errorMessagekey = errorMessage;
    }

    public override string FormatErrorMessage(string name)
    {
        var translation = HttpContext.Current.Session["translation"] as LocalisationHelper;

        return translation != null ? translation.Translate(_errorMessagekey) : ErrorMessage;
    }
}

내 로그인 작업 메서드의 POST 버전에 중단 점을 설정했는데 히트 중입니다. 양식은 서버 측 유효성 검사가 발생하는 서버에 게시됩니다. 클라이언트 측 유효성 검사가 발생하지 않습니다.

내가 무엇을 놓치고 있습니까?

감사합니다.

---

나는 같은 문제가 있었다. 눈에 잘 띄지 않는 유효성 검사 스크립트가로드되지 않은 것 같습니다 (마지막의 스크린 샷 참조). _Layout.cshtml 끝에 추가하여 수정했습니다.

 @Scripts.Render("~/bundles/jqueryval")

최종 결과 :

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/jqueryval")
   @RenderSection("scripts", required: false)

내 예쁜 표준 CRUD 뷰를 제외하고는 모든 것이 Visual Studio 프로젝트 템플릿 기본값입니다.

문제 수정 후로드 된 스크립트 :

---

유효성 검사를 활성화하려는 모든보기의 끝에이 명령을 추가해야합니다.

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

---

Global.asax.cs에서 Application_Start () 메서드는 다음을 추가합니다.

DataAnnotationsModelValidatorProvider.RegisterAdapter(typeof(MyRequiredAttribute), typeof(RequiredAttributeAdapter));

---

이 문제를 이미 해결했을 수도 있지만 App_Start로 BundleConfig에서 jqueryval 항목의 순서를 변경하여 운이 좋았습니다. 클라이언트 측 유효성 검사는 새로운 기본 MVC 4 인터넷 솔루션에서도 작동하지 않습니다. 그래서 기본값을 변경했습니다.

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

...에

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*",
                    "~/Scripts/jquery.unobtrusive*"));

이제 클라이언트 측 유효성 검사가 작동합니다. 눈에 잘 띄지 않는 파일이 끝에 있는지 확인하고 싶을뿐입니다.

---

마지막으로 필요한 스크립트를 .cshtml 파일에 다음 순서로 직접 포함하여이 문제를 해결했습니다.

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

주제에서 벗어난 주제이지만, 웹 프로그래밍에서 이런 종류의 일이 얼마나 자주 발생하는지에 대해 계속 놀라움을 금치 못합니다. 즉, 모든 것이 제자리에있는 것처럼 보이지만 작업을 진행하기 위해 일부 모호한 조정이 필요한 것으로 밝혀졌습니다. 어설픈, 어설픈, 어설픈.

---

입력에 데이터 유효성 검사 속성이 없습니다. Html.TextBoxFor와 같은 서버 측 도우미를 사용하여 생성했으며 양식 내에 있는지 확인하십시오.

@using (Html.BeginForm())
{
    ...
    @Html.TextBoxFor(x => x.AgreementNumber)
}

또한 jquery.validate.inline.js스크립트가 무엇인지 모르겠지만 어떻게 든 jquery.validate.js플러그인에 의존하는 경우 그 이후에 참조되는지 확인하십시오.

모든 경우에 잠재적 인 오류나 누락 된 스크립트가 있는지 브라우저에서 자바 스크립트 콘솔을 확인하세요.

---

당신이 사용하는 경우 jquery.validate.js와 jquery.validate.unobtrusive.js클라이언트 측에서 유효성을 검사하는 데, 당신은 당신이 당신의 요구에 어떤 DOM 요소의 유효성 검사 속성을 등록 할 필요가 있음을 유의하십시오. 따라서 다음 코드를 사용할 수 있습니다.

$.validator.unobtrusive.parse('your main element on layout');

모든 유효성 검사 속성을 등록합니다. 예 $(document).ajaxSuccess() or $(document).ready()를 들어이 메서드를 호출 하여 모든 항목을 등록하면 cshtml 파일에 모든 js 파일을 등록하는 대신 유효성 검사가 성공적으로 수행 될 수 있습니다.

---

유효성 검사에 문제가 있었고 양식이 게시되면 유효성이 검사됩니다.

이것은 jquery cdn에서는 작동하지 않습니다.

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

이것은 jquery cdn없이 작동합니다.

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

희망은 누군가를 돕습니다.

---

유효성 검사 데이터-* 속성이 입력에 대해 렌더링 된 html에 표시되지 않는 이유는 양식 컨텍스트가 없기 때문일 수 있습니다. FormContext는를 사용하여 양식을 만들 때 자동으로 만들어 @using(Html.BeginForm(...)) { ... }집니다.

양식에 일반 html 태그를 사용하는 경우 클라이언트 측 유효성 검사를받을 수 없습니다.

---

나에게 이것은 많은 검색이었습니다. 결국 저는 파일을 직접 다운로드하는 대신 NuGet을 사용하기로 결정했습니다. 관련된 모든 스크립트와 스크립트 번들을 삭제하고 다음 패키지를 얻었습니다 (현재 최신 버전).

• jQuery (3.1.1)
• jQuery 유효성 검사 (1.15.1)
• Microsoft jQuery Ubobtrusive Ajax (3.2.3)
• Microsoft jQuery Unobtrusive Validation (3.2.3)

그런 다음 BundleConfig 파일에 다음 번들을 추가했습니다.

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.js",
                "~/Scripts/jquery.validate.unobtrusive.js",
                "~/Scripts/jquery.unobtrusive-ajax.js"));

이 참조를 _Layout.cshtml에 추가했습니다.

@Scripts.Render("~/bundles/jquery")

그리고 유효성 검사가 필요한 뷰에이 참조를 추가했습니다.

@Scripts.Render("~/bundles/jqueryval")

이제 모든 것이 작동했습니다.

다음 사항을 잊지 마십시오 (많은 사람들이 잊어 버립니다).

• 양식 태그 (@using (Html.BeginForm ()))
• 유효성 검사 요약 (@ Html.ValidationSummary ())
• 입력에 대한 유효성 검사 메시지 (예 : @ Html.ValidationMessageFor (model => model.StartDate))
• 구성 ()
• 번들에 추가 된 파일의 순서 (위에 언급 된대로)

---

<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

This code worked for me.

---

In my case the validation itself was working (I could validate an element and retrieve a correct boolean value), but there was no visual output.

My fault was that I forgot this line @Html.ValidationMessageFor(m => ...)

The TS has this in his code and got me on the right track, but I put it in here as reference for others.

---

the line below shows you haven't set an DataAttribute like required on AgreementNumber

<input id="AgreementNumber" name="AgreementNumber" size="30" type="text" value="387893" />

you need

[Required]
public String AgreementNumber{get;set;}

---

this works for me goto your model class and set error message above any prop

[Required(ErrorMessage ="This is Required Field")]
    public string name { get; set; }

import namespace for Required by Ctrl+. and finally add this in view

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

---

Use:

@Html.EditorFor

Instead of:

@Html.TextBoxFor

---

I created this html <form action="/StudentInfo/Edit/2" method="post" novalidate="novalidate"> where the novalidate="novalidate" was preventing the client-side jQuery from executing, when I removed novalidate="novalidate", client-side jQuery was enabled and stared working.

---

이 게시물에 동일한 문제가 발생했지만 PartialView에서 추가하고 싶습니다.

그리고 나는 추가해야했습니다

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

_Layout보기에 이미있는 경우에도 부분보기로.

참조 :

• 데이터 주석 / 유효성 검사가 부분보기에 대해 작동하지 않음

---

내 문제는 web.config에 있습니다. UnobtrusiveJavaScriptEnabled가 해제되었습니다.

<appSettings>

<add key="ClientValidationEnabled" value="true" />

<add key="UnobtrusiveJavaScriptEnabled" value="false" />

</appSettings>

나는 변경하고 지금 작동합니다.

`<add key="UnobtrusiveJavaScriptEnabled" value="true" />`

---

Im 내 경우에 추가했고 id는 html에서 VS에 대해 자동으로 생성 된 이름과 같으며 코드에서 해당 사례에 한 줄을 추가했습니다.

$(function () {
            $.validator.addMethod('latinos', function (value, element) {
                return this.optional(element) || /^[a-záéóóúàèìòùäëïöüñ\s]+$/i.test(value);
            });

            $("#btn").on("click", function () {
                //alert("aa");
                $("#formulario").validate({                    
                    rules:
                    {
                        email: { required: true, email: true, minlength: 8, maxlength: 80 },
                        digitos: { required: true, digits: true, minlength: 2, maxlength: 100 },
                        nombres: { required: true, latinos: true, minlength: 3, maxlength: 50 },
                        NombresUsuario: { required: true, latinos: true, minlength: 3, maxlength: 50 }
                    },
                    messages:
                    {
                        email: {
                            required: 'El campo es requerido', email: 'El formato de email es incorrecto',
                            minlength: 'El mínimo permitido es 8 caracteres', maxlength: 'El máximo permitido son 80 caracteres'
                        },
                        digitos: {
                            required: 'El campo es requerido', digits: 'Sólo se aceptan dígitos',
                            minlength: 'El mínimo permitido es 2 caracteres', maxlength: 'El máximo permitido son 10 caracteres'
                        },
                        nombres: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        },
                        NombresUsuario: {
                            required: 'El campo es requerido', latinos: 'Sólo se aceptan letras',
                            minlength: 'El mínimo permitido es 3 caracteres', maxlength: 'El máximo permitido son 50 caracteres'
                        }
                    }
                });
            });

<tr>@*<div class="form-group">     htmlAttributes: new { @class = "control-label col-md-2" }      , @class = "form-control" }*@
                <td>@Html.LabelFor(model => model.NombresUsuario )</td>

                        @*<div class="col-md-10">*@
                <td>
                    @Html.EditorFor(model => model.NombresUsuario, new { htmlAttributes = new { id = "NombresUsuario" } })
                    @Html.ValidationMessageFor(model => model.NombresUsuario, "", new { @class = "text-danger" })
                </td>

---

네임 스페이스 아래에있는 Attributes(예 :)를 사용하고 있는지 확인하십시오.RequiredAttributeSystem.ComponentModel.DataAnnotations

---

  @section Scripts
 {
<script src="../Scripts/jquery.validate-vsdoc.js"></script>
<script src="../Scripts/jquery.validate.js"></script>
<script src="../Scripts/jquery.validate.min.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.js"></script>
<script src="../Scripts/jquery.validate.unobtrusive.min.js"></script>
}

참조 URL : https://stackoverflow.com/questions/14520336/mvc-4-client-side-validation-not-working