jquery - w3schools - التحقق من جانب العميل MVC 4 لا يعمل




ol on html (13)

أود أن أضيف إلى هذا المنشور ، أنني كنت أعاني من نفس المشكلة ولكن في عرض PartialView.

وكنت بحاجة إلى إضافة

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

إلى العرض الجزئي ، حتى إذا كان موجودًا بالفعل في طريقة العرض _Layout.

المراجع:

يمكن لأحد أن يقول لي لماذا لا يعمل التحقق من جانب العميل في تطبيق 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")
}

جافا سكريبت ممكّنة في المتصفح الخاص بي. في مشروع قالب MVC 4 من التحقق من صحة العميل Visual Studio يعمل بشكل جيد.

عند تشغيل التطبيق ، في صفحة تسجيل الدخول عند عرض مصدر الصفحة ، أرى أن هذا تم عرضه:

<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 لأسلوب إجراء تسجيل الدخول الخاص بي ، ويتم ضربه. يتم نشر النموذج على الخادم حيث يحدث التحقق من جانب الخادم. التحقق من جانب العميل لا يحدث.

ماذا ينقصني؟

شكرا لكم.


إذا كنت تستخدم jquery.validate.js و jquery.validate.unobtrusive.js للتحقق من صحة جانب العميل ، يجب أن تتذكر أنه يجب عليك تسجيل أي سمة تحقق لأي عنصر DOM بناء على طلبك. يمكنك استخدام هذا الرمز:

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

لتسجيل جميع خصائص التحقق من الصحة. يمكنك الاتصال بهذه الطريقة على (على سبيل المثال): $(document).ajaxSuccess() or $(document).ready() لتسجيل كل منهم ويمكن أن يتم التحقق من الصحة بنجاح بدلاً من تسجيل جميع ملفات js على ملفات cshtml.


السبب في عدم ظهور سمات التحقق من صحة البيانات - * في html التي تم تقديمها لإدخالك هو عدم وجود سياق للنموذج. يتم إنشاء FormContext تلقائيًا عند إنشاء نموذج باستخدام @using(Html.BeginForm(...)) { ... } .

إذا كنت تستخدم علامة 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>

تأكد من إضافة هذا الأمر في نهاية كل مرة تريد فيها تنشيط عمليات التحقق.

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

ربما قمت بالفعل بحل هذا ، لكنني حظيت ببعض الحظ بتغيير ترتيب عنصر jqueryval في BundleConfig مع App_Start. لن تعمل عملية التحقق من جانب العميل حتى على حل 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*"));

والآن يعمل التحقق من جانب العميل. أنت فقط تريد التأكد من أن الملف غير المزعج في النهاية (لذلك ليس تدخلي ، ها :)


في حالتي كانت عملية التحقق نفسها تعمل (يمكنني التحقق من عنصر واسترداد قيمة منطقية صحيحة) ، ولكن لم يكن هناك مخرجات بصرية.

كان خطأي أنني نسيت هذا السطر @ Html.ValidationMessageFor (م => ...)

وقد TS هذا في شفرته وحصلت لي على الطريق الصحيح ، ولكن أضعها هنا كمرجع للآخرين.


كان لي نفس المشكلة. يبدو أنه لم يتم تحميل البرامج النصية للتحقق غير المزعجة (انظر لقطة شاشة في النهاية). أصلحته بإضافة في نهاية _Layout.cshtml

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

النتيجة النهائية:

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

باستثناء وجهة نظري القياسية CRUD جميلة كل شيء هو افتراضيات قالب مشروع الاستوديو المرئي.

البرامج النصية المحملة بعد حل المشكلة:


لا توجد سمات التحقق من البيانات على المدخلات الخاصة بك. تأكد من أنك قمت بتوليدها باستخدام مساعد جانب الخادم مثل Html.TextBoxFor وأنه داخل النموذج:

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

أيضا أنا لا أعرف ما هو البرنامج النصي jquery.validate.inline.js ولكن إذا كان بطريقة ما يعتمد على البرنامج المساعد jquery.validate.js تأكد من أنه المشار إليه بعد ذلك.

في جميع الحالات ، اطلع على وحدة تحكم جافا سكريبت في المتصفح بحثًا عن أخطاء محتملة أو برامج نصية مفقودة.


لقد أنشأت هذا html <form action="/StudentInfo/Edit/2" method="post" novalidate="novalidate"> حيث كان novalidate="novalidate" يحول دون تنفيذ jQuery من جانب العميل ، عندما أزلت novalidate="novalidate" ، تم تمكين jQuery من جانب العميل novalidate="novalidate" العمل.


واجهت مشكلة في التحقق من الصحة ، ومشاركات النموذج ، ثم تحقق من صحة ذلك ،

هذا لا يعمل مع 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>

الأمل يساعد شخص ما.


يوضح السطر أدناه أنك لم تقم بتعيين DataAttribute مثل المطلوب على AgreementNumber

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

انت تحتاج

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

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

عملت هذا الرمز بالنسبة لي.





unobtrusive-validation