Develop Reference

jquery change function does not work when fill input from cache

I try do form validator using jquery. Generally everything works except one situation.
I want in any change in input my function checkEmail check is everything is ok. If not color of input is change on red. When i write or paste to input it works but when i choose value from cache (browser give me list of value to choose) my input do not change color.
const checkEmail = () => {
if (!validator.isEmail(emailInput.val())) {
emailInput.removeClass('input-success')
emailInput.addClass('input-error')
return false
} else {
emailInput.removeClass('input-error')
emailInput.addClass('input-success')
return true
}
}
emailInput.change('input', checkEmail);
Is any way to trigger a function on really any change? I event try setTimeOut but then it looks like jquery do not see value in my Input.
PS. Im new here please be patience :)

emailInput.on('input', checkEmail);
here the demo https://jsfiddle.net/kt56opsx/

Resetting specific form input with jQuery

I currently have a radio that displays an additional input field if clicked and hides that input field if another radio is selected. What I am looking to accomplish is that when another radio input is clicked i'd like to clear that text input of any value that was put in it.
I am also utilizing MUI CSS for floating labels on form inputs which appends the .mui--is-empty class to fields that are empty and .mui--is-not-empty class to fields that contain values.
I've tried the following:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if($(this).attr('id') == 'tip-custom') {
$('#show-me').fadeIn();
} else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val('');
}
});
});
But this just sets the value to "" where I need to completely reset this specific field for the .mui--is-empty to append back to it.
Here's is a gyazo of what I am experiencing which you can see the starting state of the floating label and how it reacts when cleared.
https://gyazo.com/b848a5855d27b2d6ebd9202bda7fabe9
Is there a way to completely reset the text input as if there is actually no value?
UPDATE
I was able to accomplish what I was trying to do with the following script:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name=tip-custom-value').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
But i'm concerned that even if the value is set to '' will it return anything on form submit? I would prefer that if there is no actual value that it did not.

I'm not sure my answer is right or wrong because I cant check part of the code. I think you have a typo in your code. So, I think I could fix it. Please, check this code if it works:
$(document).ready(function() {
$('input[type="radio"]').click(function() {
if(this.id == 'tip-custom') {
$('#show-me').fadeIn();
}
else {
$('#show-me').fadeOut();
$('input[name="tip-custom-value"]').val(null).removeClass('mui--is-not-empty').addClass('mui--is-empty');
}
});
});
The typo was inside else statement. I think you forgot to close square brackets for your code.
I hope it works.

ADD ALL Button is not making select remove validation as if something was selected

I am having trouble in the IE11 browser to get my validation to work properly.
Basically what is going on is I have select lists, which when chosen show the selected values in another textarea to allow the users to be aware of which employee(s) or branch(es) is chosen. There are two buttons labeled "ADD ALL" and "Remove ALL".
The problem is if the form is submitted and the required fields are not chosen it shows they need to be chosen but when when you hit ADD ALL and it selects all the users it should no longer need validation. Since the ADD ALL button is being pressed it does not consider that as a selection made and still forces the user to click in the select and then re click the "ADD ALL" button.
Is there something in JS I can write that once the button is chosen the validation is no longer required again unless a user is not chosen upon submit or something?
In chrome it does it correctly but for some reason IE11 is complaining.
Any help would be greatly appreciated!
https://jsfiddle.net/aelliott/pu8kLmeb/
Steps:
In dropdown choose checklist stats
Select continue - don't fill out the form (validation for required fields appear.)
Select ADD ALL on either button
Validation does not disappear and form still cannot be submitted because selects think nothing has been chosen
CODE
function handleLocationChange() {
var selected = [];
loc.find("option:selected").each(function() {
selected.push($(this).text());
});
selectedElement.val(selected.join("\n"));
}
function setLocationOptionsSelected(selected) {
loc.find("option").prop("selected", selected);
loc.change();
}
function setSelectedOnEmployeeOptions(selected) {
EmployeeName.find("option").prop("selected", selected);
EmployeeName.change();
}
function handleEmployeeNameChange() {
var selected = [];
EmployeeName.find("option:selected").each(function() {
selected.push($(this).text());
});
selected1Element.val(selected.join("\n"));
}

After playing around with it and finding pages like this issue logged on github, I was able to add in a hack for IE - i.e. to set the selectedIndex property of the select list manually before adding all items (inspired by this answer).
function setLocationOptionsSelected(selected) {
if (selected && window.navigator.userAgent.indexOf('Trident') >= 0) {
loc.prop('selectedIndex', 0);
}
loc.find("option").prop("selected", selected);
loc.change();
}
function setSelectedOnEmployeeOptions(selected) {
if (selected && window.navigator.userAgent.indexOf('Trident') >= 0) {
EmployeeName.prop('selectedIndex', 0);
}
EmployeeName.find("option").prop("selected", selected);
EmployeeName.change();
}
I would have used $.browser.msie but apparently that is deprecated AND not available in jQuery 1.10.
I did fork the fiddle but realize that is using the latest version of jQuery, and you said you couldn't upgrade from version 1.10, so this version uses jQuery 1.10.
Update
You mentioned that when the user clicks REMOVE ALL then the field does not appear as unselected and thus the form submit handling does not catch the field as invalid despite having the required attribute enabled. To handle this case, the IE specific code can be updated to set the selectedIndex to -1 when removing all options.
In the code below, the selected variable was removed from the conditionals, and moved into a ternary operator to decide the value to be passed as the second parameter of .prop().
function setLocationOptionsSelected(selected) {
if (window.navigator.userAgent.indexOf('Trident') >= 0) {
loc.prop('selectedIndex', (selected?0:-1));
}
loc.find("option").prop("selected", selected);
loc.change();
}
function setSelectedOnEmployeeOptions(selected) {
if (window.navigator.userAgent.indexOf('Trident') >= 0) {
EmployeeName.prop('selectedIndex', (selected?0:-1));
}
EmployeeName.find("option").prop("selected", selected);
EmployeeName.change();
}

Using JQuery MaskInput Plugin with a SSN Field

I am trying to use the JQuery MaskInput plugin on a SSN field but I dont see anyway to make it display "***-**-****" after the user leaves the fields.
Did anyone get this working>

I havent tested this, but it may get you headed in the right direction. The masked input plugin has a completed function that can be called when the user has finished entering their value. You can use it to grab the value and store it in a hidden field to retain it and replace the current text with whatever you desire.
var $txt_SNN = $("#txt_SSN");
$txt_SNN.mask("999-99-9999", {
completed: function() {
$('#hdf_SNN').val($txt_SNN.val());
$txt_SNN.val("999-99-9999");
}
});

$txt_SNN.mask("999-99-9999").blur(function() {
$(this).attr('type', 'password');
});`
This should do it. Although I didn't test it.

textbox is not validated as empty if text is entered and then deleted

i have an annoying issue with watermarked text for a textbox.
what i want is if user click away of the textbox and there is no text in the textbox than the default text should appear (e.g. Search...)
i have this function to check it:
document.getElementById("searchtextbox").onblur = function() {
if (document.getElementById("searchtextbox").value == "") {
document.getElementById("searchtextbox").setAttribute("value", "Search...");
}
it works great if i just click inside and click out. the problem comes when i click inside, enter text and delete it and then click outside.
i tried doing it with Length == 0, value == null, value.trim() == "", !value.match(/.+/) and none of them return true for this case.

Please consider using the HTML5 placeholder attribute.
<input type="text" id="searchtextbox" placeholder="Search..." value="" />
As a lot of people under my answer pointed out, Internet Explorer won't be really keen on displaying your placeholder text (what a surprise). Still, it is way more semantic to use placeholder, and do a feature detection whether the browser supports it or not.
You can do feature detection like this (from diveintohtml5.ep.io):
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}
If this is false, you can use your Javascript placeholder hack.
UPDATE: If you need help how to implement in a nice way, please refer to Html placeholder text in a textarea form.
I also took a look at your code and fixed it:
jsFiddle Demo
document.getElementById("searchtextbox").onblur = function() {
if (this.value == "") {
this.value="Search...";
}
}
Using setAttribute is not the right way here, you do not want to set the attribute, but the live property (.value). Your if condition actually worked, but the change was not reflected.

As bazmegakapa suggested, consider the placeholder attribute.
To answer your question, your code isn't working because you're using setAttribute, while the user just modified the property value. Instead of using setAttribute, try using .value = 'Search...'