「マルチセレクト」が有効な選択タグにChosen jQueryを使用するフォームを使用しています。この選択タグのオプションは、Ajax呼び出しの応答から生成されます。この select タグに加えて、1 つの textarea フィールドと、'single' select を持つ別の select タグがあります (これも別の Ajax 呼び出しによって入力され、Chosen が有効になっていません)。
また、bootstrapValidator を使用してこのフォームを検証しました。直面している問題は、テキストエリアと単一選択が検証されているが、選択された複数選択が検証されていないことです。複数選択は Ajax 応答を介して入力され、Chosen も適用されますが、送信時に検証されません。
HTML
<form role="form" id="createQueForm" enctype="multipart/form-data" novalidate>
<div class="control-group form-group">
<label class="control-label">Question Text</label>
<textarea name="questionText" class="form-control" name="question" rows="3" ></textarea>
</div>
<div class="control-group form-group">
<label class="control-label">Select Tags (upto 3)</label>
<select multiple class="form-control" id="tags_select" name="tags" >
</select>
</div>
<div class="control-group form-group">
<label class="control-label">Asking as (User) :</label>
<select class="form-control" id="user_select" name="user" >
<option value="">Select User</option>
</select>
</div>
<button type="submit" class="btn btn-default">Create</button>
</form>
ジャバスクリプト
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/xoxo/api/getAllTags",
type: "POST",
dataType: "json",
crossDomain: true,
contentType: "application/x-www-form-urlencoded",
cache: false,
beforeSend: function (xhr) {
///// Authorization header /////
xhr.setRequestHeader("Authorization", "Bearer "+token);
},
success: function (data) {
var tags = data.tags;
$.each(tags,function(i,val){
$('#tags_select').append('<option value="'+val.name+'">'+val.name+'</option>')
});
$('#tags_select').chosen({no_results_text: "Oops, nothing found!",max_selected_options: 3});
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
$.ajax({
url: "http://localhost:8080/xoxo/api/getAllUsers",
type: "GET",
dataType: "json",
crossDomain: true,
contentType: "application/x-www-form-urlencoded",
cache: false,
beforeSend: function (xhr) {
///// Authorization header /////
xhr.setRequestHeader("Authorization", "Bearer "+token);
},
success: function (data) {
var users = data.users;
$.each(users,function(i,val){
$('#user_select').append('<option value="'+val.id+'">'+val.fName+' '+val.lName+'</option>')
});
},
error: function (jqXHR, textStatus, errorThrown) {
}
});
$('#createQueForm').bootstrapValidator({
live: 'disabled',
// This option will not ignore invisible fields which belong to inactive panels
exclude: ':disabled',
fields: {
question: {
validators: {
notEmpty: {
message: 'Question Text is required.'
}
}
},
tags: {
validators: {
notEmpty: {
message: 'Tags are required.'
}
}
},
user: {
validators: {
notEmpty: {
message: 'Asking User is required.'
}
}
}
}
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the FormValidation instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
var question = new Object();
question.questionText = $('textarea[name=questionText]').val();
question.tags = $('#tags_select').val();
question.userId = $('#user_select').val();
$.ajax({
url: "http://localhost:8080/xoxo/api/createQuestionOnWeb",
data: question,
type: "POST",
dataType: "json",
crossDomain: true,
contentType: "application/x-www-form-urlencoded",
cache: false,
beforeSend: function (xhr) {
///// Authorization header /////
xhr.setRequestHeader("Authorization", "Bearer "+token);
},
success: function (data) {
if(data.status == "success"){
$('.alert-danger').hide();
$('.alert-success').show();
location.href = "questions_list.php";
}else{
$('.alert-success').hide();
$('.alert-danger').html(data.errorReason).show();
}
},
error: function (jqXHR, textStatus, errorThrown) {
$('.alert-success').hide();
$('.alert-danger').html('Oops..! Something went wrong.').show();
}
});
});
});
Ajax 呼び出しによってオプションが入力された後、選択された複数選択タグの検証を有効にする方法を理解するのを手伝ってください。