jquery - جكري فاليداتيون أند بوتستراب 3 فور سيم فورم-غروب



validation jquery-validate (2)

أواجه سؤالا ريجارينغ "هاس-إرور" الفئة والكائن المعقد.

أساسا لنوع واحد بسيط يعمل بشكل جيد جدا ولكن لكائن معقد لا.

لدي الرمز التالي:

التحقق من صحة:

public static MvcHtmlString ValidationErrorFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, string error)
{
    if (HasError(htmlHelper, ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData), ExpressionHelper.GetExpressionText(expression)))
        return new MvcHtmlString(error);
    else
        return null;
}


private static bool HasError(this HtmlHelper htmlHelper, ModelMetadata modelMetadata, string expression)
{
    string modelName = htmlHelper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldName(expression);
    FormContext formContext = htmlHelper.ViewContext.FormContext;
    if (formContext == null)
        return false;

    if (!htmlHelper.ViewData.ModelState.ContainsKey(modelName))
        return false;

    ModelState modelState = htmlHelper.ViewData.ModelState[modelName];
    if (modelState == null)
        return false;

    ModelErrorCollection modelErrors = modelState.Errors;
    if (modelErrors == null)
        return false;

    return (modelErrors.Count > 0);
}

جافا سكريبت

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".form-group").addClass("has-error");
    },
    unhighlight: function (element) {
        $(element).closest(".form-group").removeClass("has-error");
    }
});

في ما يلي لوحة التعديل:

@model DatingWebsite.Models.UserDate

<div class="[email protected](Html.ValidationErrorFor(m=>m, " has-error"))">
    @Html.LabelFor(m=>m.Birthdate, new {@class="col-sm-2 control-label"})
    <div class="col-sm-10">
        @Html.DropDownListFor(model => model.Day, Enumerable.Range(1, 31).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString() }), Base.Day, new {@class="form-control" })
        @Html.DropDownListFor( model => model.Month, Enumerable.Range(1, 12).Select(i => new SelectListItem { Value = i.ToString(), Text = System.Globalization.CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(i)}), Base.Month, new {@class="form-control" })
        @Html.DropDownListFor( model => model.Year,  Enumerable.Range(DateTime.Now.AddYears(-80).Year, 80-18).Select(i => new SelectListItem { Value = i.ToString(), Text = i.ToString()}), Base.Year, new {@class="form-control" })

        @Html.ValidationMessageFor(m => m.Day, null, new { @class = "help-block" })
        @Html.ValidationMessageFor(m => m.Month, null, new { @class = "help-block" })
        @Html.ValidationMessageFor(m => m.Year, null, new { @class = "help-block" })
    </div>
</div>

وهنا هو النموذج:

[Required]
public int Day { get; set; }
[Required]
public int Month { get; set; }
[Required]
public int Year { get; set; }

الآن كما ترون من أجل التحقق من صحة أفعل (م => م) حتى اجتياز الكائن كله.

1) إذا كنت لا تملأ أي شيء وأنا أقدم، أحصل على كل منهم أحمر، لذلك يتم تطبيق أسلوب، وأحصل على جميع رسائل الخطأ باللون الأحمر.

2) أنا تغيير القائمة المنسدلة الأولى إلى قيمة، ثم يختفي اللون، وأنه ليس أحمر بعد الآن، على الرغم من أنني لا تزال ترى رسائل الخطأ 2 الأخرى ...

3) إذا قدمت مرة أخرى مثل هذا ثم أنها لن تصبح حمراء مرة أخرى.

ملاحظة: الصور التي أضيفت ليست مع القوائم المنسدلة، ولكن مربعات النصوص لأنه يحتوي على نفس المشكلة.

أي شخص لديه فكرة ما هو الخطأ مع التعليمات البرمجية؟

تحديث

لقد لاحظت أنه عند إضافة قيمة إلى مربع نص واحد، ثم يقوم جافا سكريبت باستدعاء الدالة أونليتليت ويزيل فئة الخطأ، ولا يتم استدعاء الدالة تمييز لمربع النص 2 الأخرى.

https://ffff65535.com


أنا فقط كان نفس المشكلة وجدت حلا. انها ليست جميلة، ولكن يبدو للعمل.

لقد أضفت مجموعة multi-validation-group إلى ديفي form-group التي يمكن أن تحتوي على رسائل خطأ متعددة ثم نفذت الدالة أونليتليت المخصصة التالية، الذي يزيل فقط فئة has-error من form-group ديف form-group إذا لم يكن هناك تسمية خطأ لا تزال مرئية فيه.

jQuery.validator.setDefaults({
  errorClass: "has-error",
  highlight: function(element, errorClass, validClass) {
    $(element).closest(".form-group").addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    var group = $(element).closest(".form-group");
    var removeClass = true;

    if (group.hasClass("multi-validation-group")) {
      removeClass = $(group).find("label.has-error:not(:hidden)").length == 0;
    }

    if (removeClass) {
      group.removeClass(errorClass);
    }
  }
});

ومن الطرق الأنظف لتحقيق ذلك ترآيب ترميز هتمل بوتستراب بحيث يكون لكل مدخل مجموعة أشكال خاصة به، وبهذه الطريقة يعمل highlight التحقق من الصحة والأساليب غير unhighlight بشكل صحيح. يمكن أن توضح وثائق بوتستراب كيفية إنشاء تنسيق نموذج هتمل المناسب لاستيعاب هذا.





twitter-bootstrap-3