0
を選択し、複数のSELECT2でjquery.stepsに取り組んでいないI 3つのSELECT2入力コントロールが含まjquery.stepのようなウィザードを作成するには、次のHTMLコードを持っている：ここ検証が入力
<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
});
私の問題は2つです：
- フォームの検証は最初SELECT2の入力CONを検証しますトロール、決して第2および第3。
- select2の検証エラーのスタイルが残りの検証コントロールと一致しません。
私は間違っていると誰が知っていますか？私はjquery.validationとselect2の両方のドキュメントとサンプルを検索しましたが、私はそれを正しくやっているようですが、明らかにどこかで間違いがあります。
事前に感謝します。
よろしく、
ハビエル