Develop Reference

Type Error: cannot read property length of undefined for empty_value_check

These are the javascript functions for my html form, to validate for empty values in "input" elements and "select" elements respectively. The empty_select_check function doesn't work and I'm not sure why, but the empty_value check works for the individual fields. However, it does not work in the empty_value_all() fucntion. Note that the empty_value_all() is called when the user clicks submit.
I get the following error:
Type Error: cannot read property length of undefined for empty_value_check. Any idea why it works for individual fields but not for when i try to submit? Let me know if you require my html code but basically its just input elements with an onkeyup="" where I call the js functions.
function submitform(){
empty_value_all()
$('#Start').click()
}
}
function empty_value_check(ele) {
let value = ele.value;
console.log(value)
if (value === '' || value.length === 0) {
if ($(ele).closest('div').find('small').length != 0)
$(ele).closest('div').find('small').removeClass('hide').removeClass('d-none');
else
$(ele).closest('div').nextAll('small').removeClass('hide').removeClass('d-none');
$(ele).addClass('is-invalid');
}
else {
$(ele).nextAll('small').addClass('hide');
$(ele).removeClass('is-invalid');
}
}
function empty_select_check(ele) {
if (ele.value === "Select Folder" || ele.value === undefined) {
$(ele).addClass('invalid-feedback');
return false
} else {
$(ele).removeClass('is-invalid');
}
}
$(function() {
$('#field_5,#field_6,#field_7').on('change', empty_select_check(this))
})
function empty_value_all() {
$('#field_1,#field_2,#field_3,#field_4').each(empty_value_check(this));
$('#field_5,#field_6,#field_7').each(empty_select_check(this));
return false;
}

$(selector).each(looping_function) expects a function as input, but in the code in question, it is the result of the function that is being passed. Update empty_value_all as below and try,
function empty_value_all() {
$('#field_1,#field_2,#field_3,#field_4').each(function () {
empty_value_check(this);
});
$('#field_5,#field_6,#field_7').each(function () {
empty_select_check(this);
});
//...
}

Don't allow click if any inputs with specific class are visible and have no value

How can I ALERT and PREVENT users from clicking on any elements with the class .popup_element if any VISIBLE INPUTS with class .weight have NO value
Below code is what I tried myself but doesn't seem to work.
$(".popup_element").click(function() {
'' == $(".weight:visible").value &&
alert("Please Select Value First.")
event.preventDefault();
}),

You can do it like this:
$(".popup_element").click(function(event) {
var foundNoValue = false;
$(".weight:visible").each(function(){
if($.trim($(this).val()) == "")
{
foundNoValue = true;
}
});
if(foundNoValue){
alert("Please Select Value First.")
event.preventDefault();
}
})

You can use the .filter() method to test for any blank values:
$(".popup_element").click(function() {
if ($(".weight:visible").filter(function() { return this.value === ""; }).length > 0) {
alert("Please Select Value First.")
event.preventDefault();
}
})
(If you need to treat nothing-but-spaces inputs as blank just use this.value.trim() === "".)
I know I shouldn't really be encouraging your shortcut && instead of if code, but if you want to do that you can have it run multiple statements by using parentheses and the comma operator:
$(".popup_element").click(function() {
$("input").filter(function() { return this.value === ""; }).length && (
alert("Please Select Value First."),
event.preventDefault()
);
});

How to not validate certain inputs

I have a form where I'm using twitter typehead & the problem is whenever twitter typehead loads it creates another input field that is blank &not shown to user
Now i have this function to validate all inputs
var fields = $('#second_step input[type=text]');
var error = 0;
if (!$("input[name='career']:checked").val()) {
alert('Please Select yes or no'); return false;
}
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if (!$('#reg').valid()) {
return false;
}
Now due to that typehead input whic has no name or id it just have a certain class tt-hint & this input is read only how can i just skip this input from my above validation?

You can use jQuery's NOT function.
var fields = $('#second_step input[type=text]').not('.tt-hint');

You can filter out the fields with:
var fields = $('#second_step input[type=text]:not(.tt-hint)');

Your input has typeahead applied by using a class selector .typeahead.
So in your case you could use the :not pseudo-class selector to filter them out:
var fields = $('#second_step input[type=text]:not(.typeahead)');
That way you skip the typeahead fields.

Personally I would ignore disabled fields, since the user cannot correct them if there is an error. You say the input is read only so that would seem to correlate.
$('#second_step input[type=text]').filter(function(){ return !this.disabled; })

Try this :
fields.each(function(){
var value = $(this).val();
if($(this).hasClass('tt-hint') {
$(this).addClass('valid');
} else {
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
}
});
if (!$('#reg').valid()) {
return false;
}

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;
}

Javascript identifying enabled drop down select type

I have a form with multiple types of entry fields with some complicated validation that disables/enables various input types based on what the user enters or selects. I am using JS to check the different enabled input types and if they are empty it keeps a running total. Everytime an enabled input is modified the CheckForm function runs.
However, the problem that I am having is identifying which drop down select types are enabled, and if empty then they need to be counted in the alt_count variable. If you look at the code below please note that check boxes and normal text entry types are working fine, it is only a problem with the select-one type.
Code:
function CheckForm() {
var alt_count = 0;
var field_list = '';
$('tr#BaseTab td input:not(:button):not(:disabled), tr#BaseTab td select:not(:disabled)').each(function () {
if ($(this).attr('type') === 'checkbox') {
var temp_obj = $(this);
var temp_name = $(this).attr('name');
if ($('input[name=' + temp_name + ']:checked').length === 0) {
alt_count += 1;
}
} else if ($(this).attr('type') === 'select-one') {
if ($(this).attr("selectedIndex") === 0) {
alt_count += 1;
}
} else {
if ($(this).val() === '') {
alt_count += 1;
}
}
});
Thanks for any help offered.

The select element will not actually have the attribute type="select-one". However, the DOM element will have a .type property that allows you to check if you are dealing with a select-one or a select-multiple. So, instead of checking the 'type' attribute, check the property like this:
else if ($(this)[0].type === 'select-one') {