jquery for bootstrap select validation - javascript

Bootstrap 3 validation is not work properly in select. html code is
<div class="control-group">
<label class="control-label">Select std.<span class="f_req">*</span></label>
<div class="controls">
<select name="std" class="span5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
And javascript is rules: { std: { required : true } }
Please help me.. thanks in advance

Related

Select options with the same CSS class and jQuery

I am new to jQuery/JS and I have this problem: You can run my code and see that count is not correct:
$('.form-control').change(function() {
countTotal();
});
$('.form-control').change(function() {
countTotal();
});
function countTotal() {
var level1 = parseInt($(".form-control :selected").val(), 10);
var level2 = parseInt($(".form-control :selected").val(), 10);
var total = level1 * level1;
$(".form-group > #riz").val(total);
$(".form-group > #riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
My HTML has to stay the same, I have to find some way to jQuery work in this example and keep the HTML structure the same. If you have any idea how to solve this, feel free to comment or share code ideas.
I appreciate your help!
There is multiple problems with your code.
First, you are using the same id multiple times. ID must be unique.
Second, think this is wrong var total = level1 * level1; should be var total = level1 * level2;
Third, you don't need to use :selected in $(".form-control :selected").val(), since $(".form-control").val() will always take the value of the selected option, if your element is a select.
Now I have changed both your html and jquery so it will work to your requirement.
Demo
$('.form-control').change(function() {
countTotal($(this));
});
function countTotal(ele) {
var level1 = parseInt(ele.val() || 0, 10);
var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);
var total = level1 * level2;
ele.closest(".form-group").next().find(".riz").val(total);
ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>

Minus the value of option to itself on click

I'm trying to update the value of selectbox option after click. It should subtract the selected value to itself.
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
standardRoom function
function standardRoom()
{
$('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
}
If the selected value is 3 after click the remaining value should update to:
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
To remove last childs from #selectBoxStandard based on option value:
$('button').on('click', standardRoom);
function standardRoom() {
$('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button>Update</button>
</div>
This will work but could probably be done a bit easier or better:
function standardRoom(){
var last_option = $('#selectBoxStandard option:last-child').val();
var selected_option = $('#selectBoxStandard').val();
$("#selectBoxStandard option").each(function() {
if($(this).val() > (last_option - selected_option)){
$(this).remove();
}
});
}
add this js
let total = 7
function changed(){
let selBox = document.getElementById('selectBoxStandard');
let value = selBox.value;
//remove all options
while(selBox.children.length > 0) selBox.removeChild(selBox.children[0]);
//add new options according to value;
for(let i = 0;i<7-value+1;i++){
selBox.innerHTML += `<option value="${i}">${i}</option>`
}
//resets value
selBox.value = value;
}
add onchange on ur select
<select onchange="changed()" required tabindex="10" id="selectBoxStandard" name="n_rooms">
if you want to change on btn click use this
<div onclick="changed()" class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>

puuting validation on submit button for lodash filter

I have three dropdowns:
<form name="myForm" ng-submit="save(myForm.$valid)" novalidate="novalidate">
<div class="form-group">
<label>Values:</label>
<label>First</label>
<select ng-model="a.values[0]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Second</label>
<select ng-model="a.values[1]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<label>Third</label>
<select ng-model="a.values[2]" ng-change="check()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3'>3</option>
<option value="4">4</option>
</select>
</div>
<button type="submit" class="btn btn-success">Save </button>
On these dropdowns I applied a filter:-
scope.check = function() {
if (_.uniq(scope.a.values).length !== scope.a.values.length) {
scope.notify("error", "Please set unique values");
}
};
What I want is if the values on dropdowns are not unique then on save button it shows error. Please note that these are not required fields so validation related to that is not required. Only if user set same values then only on save it shows error.

how to select multi select option in drop down using jquery

<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes('dLang')">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div class="checkboxes" id="dLang" style="overflow-x: hidden;">
<label for="three"><input type="checkbox" id="three"/>Czech</label>
<label for="three"><input type="checkbox" id="three"/>Danish</label>
<label for="three"><input type="checkbox" id="three"/>Dutch</label>
</div>
</div>
#This code working fine but i want to add scrollbar here.Can any one help?#
Take a look at this snippet. Is this what you need?
.multiSelect {
height: 100px;
overflow: scroll;
overflow-x: hidden;
}
<select class="multiSelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
(Hold down CTRL to select multiple elements)
This is you should need to check : http://www.jqueryfaqs.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-using-jQuery.aspx
<script type="text/javascript">
$(function () {
$('[id*=your id name ]').multiselect({
includeSelectAllOption: true
});
});
</script>

Jquery Form Validation does not work

I have this JQuery Mobile Form, which sends the inputs to a MySQL Database. I would like to validate all fields as required. However, it does not work and I cannot find the error.
Here is the first part of the form. I put "required" on the input fields.
<form id="form-haftpflicht" method="post">
<div data-role="fieldcontain">
<fieldset data-role="fieldcontain">
<label for="versicherungsbeginn"><b>Versicherungsbeginn</b></label>
<input type="date" name="versicherungsbeginn" id="versicherungsbeginn" value="" required />
</fieldset>
<fieldset data-role="fieldcontain">
<label for="erwachsene" class="select"><b>Anzahl Erwachsene:</b></label>
<select name="erwachsene" id="erwachsene" data-role="none" required>
<option value="standard" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="kinder" class="select"><b>Anzahl Kinder:</b></label>
<select name="kinder" id="kinder" data-role="none" required>
<option value="standard" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</fieldset>
</div>
And here is my script with the API
$(document).ready(function () {
$("#store-haftpflicht").click(function () {
$("#form-haftpflicht").submit();
});
$("#form-haftpflicht").submit(function (event) {
event.preventDefault();
$("#ajax-loader").css("display", "block");
$.ajax({
url: 'http://app.lovanet.ch/app/store_haftpflicht.php',
data: $(this).serialize(),
method: 'POST',
success: function (data, status) {
$("#ajax-loader").css("display", "none");
},
error: function () {
output.text('Keine Prämien gefunden.');
}
});
});
});
A select is considered empty (and then invalid if the field is required) if the selected option has an empty value (""), but yours have a value ("standard").
To fix the problem with validation, just replace the "standard" value in the first option for a "":
<select name="kinder" id="kinder" data-role="none" required>
<option value="" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>

Categories