Data Package source information

Specify" />

Проверка не работает на jquery.steps с более чем одним выбором select2

760 просмотра

1 ответ

1 Репутация автора

У меня есть следующий HTML-код для создания jquery.step-подобного мастера, который включает 3 элемента управления вводом select2:

<form id="form" action="#" >
       <h1>Data Package source information</h1>
       <fieldset>
            <h2>Specify the details of the new Data Package</h2>
            <div class="row">
                 <div class="col-lg-8" id="importFileData">
                      <div class="form-group">
                           <label>Customer *</label>
                           <select class="form-control required" id="selectCustomer" data-bind="options: customers, optionsText: 'Name', optionsValue: 'Id'"></select>
                      </div>
                      <div class="form-group">
                           <label>System type *</label>
                           <select class="form-control required" id="selectSystem" data-bind="options: systems, optionsText: 'Name', optionsValue: 'TypeId'"></select>
                      </div>
                      <div class="form-group">
                            <label>Select the instrument where the data package comes from *</label>
                            <select class="form-control required" id="selectInstrument" data-bind="options: instruments, optionsText: 'SerialNumber', optionsValue: 'SerialNumber'"></select>
                      </div>
                      <div class="form-group">
                            <label class="font-noraml">Select the date of import (by default today)</label>
                            <div class="input-group date">
                                 <span class="input-group-addon"><i class="fa fa-calendar"></i></span><input id="importDate" type="text" class="form-control" value="@DateTime.Now.ToString("d")">
                            </div>
                      </div>
                 </div>
                 <div class="col-lg-4">
                      <div class="text-center">
                            <div style="margin-top: 20px">
                                  <i class="fa fa-sign-in" style="font-size: 180px; color: #e5e5e5"></i>
                            </div>
                      </div>
                  </div>
            </div>
      </fieldset>
</form>

И здесь Javascript:

 $("#form")
            .steps({
                bodyTag: "fieldset",
                onStepChanging: function (event, currentIndex, newIndex) {
                    var form = $(this);
                    // Always allow going backward even if the current step contains invalid fields!
                    if (currentIndex > newIndex) {
                        return true;
                    }

                    form.validate();

                    // Start validation; Prevent going forward if false
                    return form.valid();
                },
                onStepChanged: function (event, currentIndex, priorIndex) {

                },
                onFinishing: function (event, currentIndex) {
                    var form = $(this);
                    form.validate();
                    // Start validation; Prevent form submission if false
                    return form.valid();
                },
                onFinished: function (event, currentIndex) {
                    var form = $(this);

                    // Submit form input
                    form.submit();
                }
            })
            .validate({
                errorPlacement: function (error, element) {
                    element.before(error);
                }
            });

        $("#selectCustomer")
            .select2({
                placeholder: "Select a customer",
                allowClear: true
            })
            .on("change",
                function (e) {
                    var selectedCustomerId = $("#selectCustomer").val();

                    $.ajax({
                        url: self.getValidUrl() + "/api/DataPackageManagementApi/Systems/" + selectedCustomerId,
                        async: true,
                        type: "GET",
                        success: function (results) {
                            self.importDataPackageViewModel.systems.removeAll();
                            self.importDataPackageViewModel.systems.push("");

                            $.each(results,
                                function (key, item) {
                                    self.importDataPackageViewModel.systems.push(item);
                                });

                            $("#selectSystem").prop("disabled", false);
                        },
                        error: function (jqXhr, textStatus, errorThrown) {
                            console.log(JSON.stringify(jqXhr));
                            console.log("AJAX error: " + textStatus + " : " + errorThrown);
                        }
                    });
                });

        $("#selectSystem")
            .select2({
                placeholder: "Select a system",
                allowClear: true,
                disabled: true
            })
            .on("change",
                function (e) {
                    var selectedCustomerId = $("#selectCustomer").val();
                    var selectedSystemId = $("#selectSystem").val();
                    $.ajax({
                        url: self.getValidUrl() + "/api/DataPackageManagementApi/Instruments/" +selectedCustomerId +"/" +selectedSystemId,
                        async: true,
                        type: "GET",
                        success: function (results) {
                            self.importDataPackageViewModel.instruments.removeAll();
                            self.importDataPackageViewModel.instruments.push("");

                            $.each(results,
                                function (key, item) {
                                    self.importDataPackageViewModel.instruments.push(item);
                                });

                            $("#selectInstrument").prop("disabled", false);
                        },
                        error: function (jqXhr, textStatus, errorThrown) {
                            console.log(JSON.stringify(jqXhr));
                            console.log("AJAX error: " + textStatus + " : " + errorThrown);
                        }
                    });
                });

        $("#selectInstrument")
            .select2({
                placeholder: "Select a Instrument",
                allowClear: true,
                disabled: true
            });

У меня две проблемы:

  1. Валидация формы проверяет только первый входной элемент управления select2, но не второй и не третий.
  2. Стиль ошибки проверки select2 не соответствует остальным элементам управления проверкой.

Кто-нибудь знает, что я делаю не так? Я искал и документацию, и примеры jquery.validation и select2, и мне кажется, что я делаю это правильно, но, очевидно, где-то есть ошибка.

Спасибо заранее!

С Уважением,

Хавьер

Автор: Javier Jimenez Roda Источник Размещён: 18.07.2016 10:38

Ответы (1)


0 плюса

285 Репутация автора

Вы можете проверить что-то вроде этого:

$('#form-add-comment').validate({
    onkeyup: false,
    rules: {
        Comment: "required"
    },
    messages: {
        Comment: "Please enter Comment"
    },
    errorClass: "has-error",
    validClass: "success",
    highlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-offscreen")) {
            elem.parent().addClass('Select2Error');
        }
        else {
            elem.parent().addClass(errorClass);
        }

    },
    unhighlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.parent().hasClass(errorClass))
            elem.siblings('.error-container').remove();
        if (elem.hasClass("select2-offscreen")) {
            $("#" + elem.attr("id")).on("change", function () {
                $(this).parent.removeClass("Select2Error");
            });
            elem.parent().removeClass('Select2Error');
            elem.siblings('.error-container').remove();
        }
        else {
            elem.parent().removeClass(errorClass);
        }
    },
    errorPlacement: function (error, element) {
        var container = $('<div />');
        container.addClass('error-container');
        $("#" + element[0].id).addClass('disp-error');
        error.insertBefore(element);
        error.wrap(container);
        error.insertBefore(error);
    },
});
Автор: Surendra Suthar Размещён: 20.07.2016 10:21
Вопросы из категории :
32x32