Как разрешить конфликт ошибок jquery-validate + bootstrap - PullRequest
0 голосов
/ 09 сентября 2018

Извините, если это легко исправить, и текстовая стена, но я просмотрел сеть и этот сайт и нашел много решений, но ни одно из них не решило мою проблему:

У меня есть проверка на стороне сервера, чтобы убедиться, что ни одна компания не существует в БД с таким именем, запрос запускается и возвращается с ожидаемым результатом true / false и выходными данными проверки MVC, как и ожидалось

Программа проверки начальной загрузки и jquery обрабатывает ответ и правильно выводит данные, когда пользователь печатает, а любые дубликаты показывают правильное сообщение об ошибке.

Однако, когда пользователь выходит из поля ввода или щелкает по нему, проверка выполняется снова и показывает успех даже в случае ошибки:

статус проверки

Я вижу, что has-error и has-success меняются при потере фокуса, я предполагаю, что это происходит с помощью начальной загрузки, поскольку сообщение об ошибке MVC все еще там, однако настройки jquery.validation.definition должны справились с этим?

Примечание. На этой странице имеется несколько форм (разделенных на частичные представления)

Я видел разные настройки для параметров проверки, однако у меня есть шкаф, в котором я могу работать ... Любая помощь очень ценится.

JS Fiddle

библиотеки / рамки

- .net MVC 5
- bootstrap 4 
- jquery
- jquery-validate
- jquery-validate-unobtrusive

предпосылки сайта:

web.config

<appSettings>
   <add key="webpages:Version" value="3.0.0.0" />
   <add key="webpages:Enabled" value="false" />
   <add key="ClientValidationEnabled" value="true" />
   <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Layout.cshtml

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryvalidateUnobtrusive")

BundleConfig.cs

//Bootstrap
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/scripts/components/bootstrap/bootstrap.js",
    "~/Scripts/components/respond.js",
    "~/Scripts/components/vendor/validator.js"
));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.validate.js",
    "~/Scripts/components/jQuery/validate/jquery.validate.definition.js"
));

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

Код:

Контроллер (SupportCompany.cs)

    public JsonResult SupportCompanyValidation(string Name)
    {
        //procedureValues = dbObject.checkDataType(supportCompany);

        var result = dbObject.SQLConnection("Select_Support_Companies", "@NAME = N'" + Name + "'");
        message = result.Item1;
        payload = result.Item2;
        bool notExists = true;

        if (payload.Rows.Count > 0)
        {
            notExists = false;
        }

        return Json(notExists, JsonRequestBehavior.AllowGet);
    }

Модель (SupportCompany.cs)

    [Remote("SupportCompanyValidation", "SupportCompany", ErrorMessage = "Company name already exists")]
    public string Name { get; set; }

Просмотр (index.cshtml)

<div class="form-group has-feedback">
    <label for="Name" class="col-md-4 control-label">@Html.LabelFor(m => m.Name, "Name:")</label>
    <div class="col-md-4 inputGroupContainer">
        <div class="input-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
            @Html.TextBoxFor(m => m.Name, new { placeholder = "Company Name", @class = "form-control", required = "required" })
        </div>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
     </div>
     <label class="help-block with-errors">*@Html.ValidationMessageFor(m => m.Name)</label>
</div>

jquery.validate.unobtrusive настройки совместимости (jquery.validate.definition.js)

$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest('.form-group').removeClass("has-success").addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

1 Ответ

0 голосов
/ 16 сентября 2018

Я обнаружил проблему.

В моем комплекте было:

"~/Scripts/components/vendor/validator.js"

Это было взято из стороннего плагина таблиц, но оно конфликтует с начальной загрузкой + интеграцией MVC.

validator.js - плагин начальной загрузки, найденный здесь: github.com/1000hz/bootstrap-validator, поэтому я поднимаю проблему там.

Мне нужно быть более осторожным с подключением сторонних плагинов и сделать больше своих собственных: p

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...