I’m working on the validation part of the jQuery Chosen multi-select. Validation is working fine and I want to allow only one option in the multi-select dropdown. I am trying to get the length
of the multi-select but it’s not working. Can anyone tell me how to do this?
Note, when I click on the ‘save’ button I want show an alert
like ‘please select only one option’.
Also, multi-select has lot of options but my scenario here is if the drop-down is holding more than one option it should throw the ‘select one option only’ error, as above.
JavaScript
x
41
41
1
$(".chosen-select").chosen();
2
document.getElementById("plvalidate").addEventListener("click", function(event) {
3
$("#error_sp_msg_pg, #error_sp_msg_soi, #error_sp_msg_cpsea, #error_sp_msg_cpstag, #error_sp_msg_cpvari").remove();
4
var soilone = document.getElementById("soilval").value;
5
var cpseason = document.getElementById("seasonval").value;
6
var cpstages = document.getElementById("stagval").value;
7
8
if (soilone == "" || soilone == null) {
9
//alert("Please select atleset one soil type");
10
$(
11
"<span/>", {
12
"id": "error_sp_msg_soi",
13
"html": "Please select atleset one soil type"
14
}).insertBefore($("#soilval"));
15
event.preventDefault();
16
}
17
18
if (cpseason == "" || cpseason == null) {
19
//alert("Please select atleset one season");
20
$("<span/>", {
21
"id": "error_sp_msg_cpsea",
22
"html": "Please select season"
23
}).insertBefore($("#seasonval"));
24
event.preventDefault();
25
} else if (cpseason.lenght > 1) {
26
alert('please select only one option');
27
$("<span/>", {
28
"id": "error_sp_msg_cpsea1",
29
"html": "Please select only one season"
30
}).insertBefore($("#seasonval"));
31
}
32
33
if (cpstages == "" || cpstages == null) {
34
//alert(""Please select atleset one stage");
35
$("<span/>", {
36
"id": "error_sp_msg_cpstag",
37
"html": "Please select atleset one stage"
38
}).insertBefore($("#stagval"));
39
event.preventDefault();
40
}
41
});
JavaScript
1
26
26
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css"/>
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
4
5
Test :
6
<select id="soilval" data-placeholder="Select Soil type" class="chosen-select form-control" multiple tabindex="1">
7
<option>test1</option>
8
<option>test2</option>
9
<option>test3</option>
10
</select>
11
12
Test2:
13
<select id="seasonval" data-placeholder="Select Season" class="chosen-select form-control" multiple tabindex="1">
14
<option>Test3</option>
15
<option>Test4</option>
16
<option>Test5</option>
17
</select>
18
19
Test3
20
<select id="stagval" data-placeholder="Select Stages" class="chosen-select form-control" multiple tabindex="1">
21
<option>Test5</option>
22
<option>Test6</option>
23
<option>Test7</option>
24
</select>
25
26
<button class="btn btn-primary" id="plvalidate">Save</button>
Advertisement
Answer
Updated code.
JavaScript
1
43
43
1
$(".chosen-select").chosen();
2
3
document.getElementById("plvalidate").addEventListener("click", function(event) {
4
$("#error_sp_msg_pg, #error_sp_msg_soi, #error_sp_msg_cpsea, #error_sp_msg_cpstag, #error_sp_msg_cpvari").remove();
5
var soilone = $("#soilval").val();
6
var cpseason = $("#seasonval").val();
7
var cpstages = $("#stagval").val();
8
console.log("soilone11", soilone);
9
if (soilone == "" || soilone == null) {
10
alert("Please select atleset one soil type");
11
$(
12
"<span/>", {
13
"id": "error_sp_msg_soi",
14
"html": "Please select atleset one soil type"
15
}).insertBefore($("#soilval"));
16
17
}
18
$("#error_sp_msg_cpsea1").remove();
19
if (cpseason == "" || cpseason == null) {
20
//alert("Please select atleset one season");
21
$("<span/>", {
22
"id": "error_sp_msg_cpsea",
23
"html": "Please select season"
24
}).insertBefore($("#seasonval"));
25
event.preventDefault();
26
} else if (cpseason.length > 1) {
27
alert('please select only one option');
28
$("<span/>", {
29
"id": "error_sp_msg_cpsea1",
30
"html": "Please select only one season"
31
}).insertBefore($("#seasonval"));
32
}
33
34
if (cpstages == "" || cpstages == null) {
35
//alert(""Please select atleset one stage");
36
$("<span/>", {
37
"id": "error_sp_msg_cpstag",
38
"html": "Please select atleset one stage"
39
}).insertBefore($("#stagval"));
40
event.preventDefault();
41
}
42
});
43