Develop Reference

select option, checkbox, radio tags, if they be empty

For textboxes and numbers, If they are empty, We send the following error command very easily:
AJAX
parent_fieldset.find('input[type="text"], input[type="number"]').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
CSS
.input-error {
border-color: red;
}
But for select option, checkbox, radio tags, if they were empty, How should I do?

You may use something like this:
$(document).ready(function(){
$('#mySelectBox').each(function() {
if($(this).val() == -1)
$(this).addClass('input-error');
else
$(this).removeClass('input-error');
});
});
A fiddle example here. To clarify a bit, I assumed here that you'd have a "please select option" with the value -1 (so nothing was actually selected):

To verify if a combo box item has been selected, you can check the selectedIndex value.
With the checkbox, you can check its checked property.
Working example is at https://jsbin.com/hezemohali/edit?html,js,output
function verify() {
let selectCar = this.document.getElementById("car-brand");
if(selectCar.selectedIndex === 0)
selectCar.className = 'input-error';
else
selectCar.classList.remove('input-error');
let tc = this.document.getElementById("tc");
if (!tc.checked)
tc.parentNode.className = 'input-error';
else
tc.parentNode.classList.remove('input-error');
}

JS a div is not showing after page refresh

In registration form I have a 2 radio button, when one button is selected a dropdown list appears. But after register fails, the selected radio button remains but the dropdown list is not shown anymore, I want the dropdown list to be shown after register fail. There should be a solution with local storage but I dont know exactly how to write it.
here is the code, what I should add to make it happen?
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
});
});

So I found the solution finally, I tried and made it :
<script>
$(document).ready(function() {
$('input[type=radio][name=rdUserType]').change(function() {
if (this.value == '1') {
$('#cityClient').show();
$('#cityLawyer').hide();
}
else if (this.value == '0') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
localStorage.removeItem("last");
});
});
function fix(){
var check = localStorage.getItem("last");
console.log(check);
if (check === 'a') {
$('#cityClient').hide();
$('#cityLawyer').show();
}
else{
$('#cityClient').show();
$('#cityLawyer').hide();
}
}
function save(){
// rdAttorney is a id of the selected radio
if (document.getElementById('rdAttorney').checked) {
localStorage.setItem('last', 'a');
}
else{
localStorage.setItem('last', 'b');
}
}
window.onload = fix();
</script>

How to show all list items again that were previously hidden by jQuery?

I have a search box that filters results and hides them if they don't match the filter:
$('#box_street').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#street__list > .list__item').show();
} else {
$('#street__list > .list__item').each(function() {
var text = ($(this).text() + $(this).data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show()
} else {
$(this).hide();
}
});
};
});
Now, I added a function that clear the search box with $('.search__filter').val(''); The problem is, once that runs the items that were previously hidden don't show again. The form input resets ok, but the items are still hidden.
How can I show them all again?

Once the search input is empty, all you have to do is trigger the keyup event, as you already have a condition that shows all the elements
$('#reset_button').on('click', function() {
$('.search__filter').val('');
// reset form ... then
$('#box_street').trigger('keyup');
// or you could do it yourself directly with :
// $('#street__list > .list__item').show();
});

Enabling a button when 2 select tag has been selected

I am doing a verification button. I have a button that is initially in disabled state. And i have three elements as the button enabler. 1 is input tag, 1 is select tag and another 1 is select tag. When those 3 is filled and selected, the button should be enabled and back to disabled again when one or all of the elements is back to blank.
This is what ive done so far and it doesnt work. Please help me
$(window).load(function(){
$("#devicemask").on('keyup blur', function(){
$('#set-sr-property').prop('enabled', this.value.trim().length);
});
$('#flightselect').change(function() {
var op =$(this).val();
if(op ! = '') {
$('#set-sr-property').prop('disabled',false);
} else {
$('#set-sr-property').prop('disabled', true);
}
});
$('#crewselect').change(function() {
var op =$(this).val();
if(op ! = '') {
$('#set-sr-property').prop('disabled',false);
} else {
$('#set-sr-property').prop('disabled', true);
}
});
});

You need to check each value between each event. Basically will be look like this.
var input = $('#devicemask');
var select1 = $('#flightselect');
var select2 = $('#crewselect');
var button = $('#set-sr-property');
input.on('keyup blur', function(){
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
select1.change(function() {
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
select2.change(function() {
if (input.val().trim().length >= 1 &&
select1.val() !== '' &&
select2.val() !== '') {
button.prop('disabled', false);
}else{
button.prop('disabled', true);
}
});
You sure can simplifize it. Sample fiddle https://jsfiddle.net/phv5yty8
Anyways, I tried to wrap it inside $.load() but doesn't work. I don't know why. So $.ready() may fit on this.

How to validate specific input fields in a specific div

I am able to validate all fields within a div but I only want to validate specific fields. Here is a jsfiddle to show what I mean Once validation is passed the div is hidden. I have to enter data in all of the fields so if you check 'Yes' from the checkbox you will see a input field appear I don't want to include that and also if you select 'NoGame' from the dropdownlist once you enter data in all the fields apart from the two fields in the lower div (green border) and click the Test1 button you will see what I mean. Any suggestions?
This is the code which validates all fields and then Hides the div, which can also be seen in the fiddle
function IsValid(divid) {
var $div = $('#' + divid);
var result = true;
$.each($div.find("input[type='text']"), function (i, input) {
if ($(input).val().length == 0 || $.trim($(input).val()) == '') {
result = false;
return;
}
});
return result;
}
$(document).ready(function(){
$("#hide").click(function(){
if (IsValid('contentone')) {
$('#contentone').hide();
};
});
});

Input fields of type text that you don't want to validate exclude them from the validation process
function IsValid(divid) {
var $div = $('#' + divid);
var result = true;
var excludeElement = ["reason"]; //<-- EXCLUDED ELEMENTS IDS
$.each($div.find("input[type='text']"), function (i, input) {
if ($.inArray($(input).attr('id'), excludeElement) < 0 && ($(input).val().length == 0 || $.trim($(input).val()) == '')) {
result = false;
return;
}
});
return result;
}