We Keep Coding

Jquery issue with val not working as expected

I have a couple of forms on a site. On the first form I used the code below to add a border color if the input field is not blank and remove it if it is blank. This works just fine no issues. But I've found that when I try to use the same method on other forms, to do something else using the same logic, it does not work.
I have read through many forums and what I'm seeing is that the code is only read on page load. But I have forms that run the function after the page is far past loading. Can someone give some light to this? I'm really trying to understand the way this works fully.
Code that works on form:
var checkErrorIn;
jQuery(document).ready(function ($) {
checkErrorIn = setInterval(CheckErrorInput, 0);
});
function CheckErrorInput() {
if (jQuery('body').is('.page-id-6334')) {
// First Name, Last Name validation colors
var pasdFName = jQuery('#first_name').val();
var pasdLName = jQuery('#last_name').val();
if (pasdFName != '') {
jQuery('#first_name').addClass('formConfirm_cc');
} else {
jQuery('#first_name').removeClass('formConfirm_cc');
}
if (pasdLName != '') {
jQuery('#last_name').addClass('formConfirm_cc');
} else {
jQuery('#last_name').removeClass('formConfirm_cc');
}
if (pasdFName != '' & pasdLName == '') {
jQuery('#last_name').addClass('formError_cc');
} else {
jQuery('#last_name').removeClass('formError_cc');
}
if (pasdFName == '' & pasdLName != '') {
jQuery('#first_name').addClass('formError_cc');
} else {
jQuery('#first_name').removeClass('formError_cc');
}
}
}
Code that is not working:
if (jQuery('body').is('.woocommerce-page')) {
var checkActiveName = jQuery('.woo_login_form > form > #username').val();
jQuery('.woo_login_form').on('input', function(){
jQuery('.woo_login_form').addClass('cdc_keep_active');
});
if (checkActiveName =='') {
jQuery('.woo_login_form').removeClass('cdc_keep_active');
}
}
What I am trying to do is fix an issue with a form becoming hidden if not hovered over even when the input has characters. Based on my research I figured I'd do the .on to get the class added when the input got characters. That works but the removal of the characters isn't removing the class. The logic looks right to me. What am I missing?
Thank you in advance for your help and insight.
Update:
Ok so I ended up doing this:
jQuery('.woo_login_form').on('click', function () {
jQuery('.woo_login_form').addClass('cdc_keep_active');
});
jQuery('.custom-login-box > a').on('click', function () {
jQuery('.woo_login_form').toggle();
});
For some reason my class would not add with any of the methods suggested individually so I combined the logic. The first part adds the class that makes the form visible but then the form won't close if clicked out of regardless of the 'removeClass'. So I added a toggle (thank you commenters) method to the "hovered link" to allow users to close the box if not needed.
Would still like to understand why the first method worked in one instance but not the other. Any and all insight appreciated. Thank you.

In your current code example you immediately check for the value of the username field.
var checkActiveName = jQuery('.woo_login_form > form > #username').val();
The thing with this is that checkActiveName will never change, unless it is reassigned elsewhere in the code.
What you need to do is to check the current value after every input of the user. That means moving that line of reading the value of the input inside the input event listener.
if (jQuery('body').is('.woocommerce-page')) {
var $wooLoginForm = jQuery('.woo_login_form');
var $userName = jQuery('#username'); // This ID should only exist once, so no need for complex selectors.
$wooLoginForm.on('input', function() {
var checkActiveName = $userName.val();
if (checkActiveName =='') {
$wooLoginForm.removeClass('cdc_keep_active');
} else {
$wooLoginForm.addClass('cdc_keep_active');
}
});
}
On a sidenote: using setInterval to validate your form is a bad practice. This would basically run infinitely. It doesn't have to. You only have to check if a form is valid after the user enters a value.
Apply the same technique with the event listener like in your second code snippet.
var $document = jQuery(document);
$document.ready(function ($) {
/**
* It might even be better to listen for the input event on the form
* that has to be validated, but I didn't see it in your code.
* Right now it listens for input on the entire page.
*/
$document.on('input', CheckErrorInput);
});

How can I make Tab and Enter behave the same in a series of Inputs?

I am performing some validation on a series of input boxes. I need to ensure that a value entered is divisible by 6.
When the user tries to submit an invalid value, all other inputs are disabled until they correct the error, and a Div pops up explaining the issue.
The first approach I tried was capturing a keyup event of a Tab or Enter:
$(".test1").keyup(function(event) {
if((event.keyCode == 9) || (event.keyCode == 13)) {
event.preventDefault();
var valid = true;
if(parseInt($(this).val()) % 6 != 0){
valid = false;
$('#errorMessage').html("That's not divisible by 6");
}
if (!valid){
// Show error message and disable other text boxes
var position = $(this).position();
$('input').not(this).prop('disabled', true);
$("#validation").show();
$("#validation").offset({top:position.top, left:position.left + $(this).width()});
} else {
// Hide error message and enable other text boxes
$("#validation").delay(200).hide();
$('input').not(this).prop('disabled', false);
$(this).parent().next().find('.test1').focus();
}
}
});
This works fine when the user submits with an Enter, but if they tab it does the following:
If the validation is passed, it triggers again in the next text box
If the validation fails, the focus still moves to the next text box
If the validation failed (and the user had pressed enter) when the user corrects it the error Div is not removed when the resubmit using Tab
The second approach was to use the Change event:
$(".test2").change(function(){
var valid = true;
if(parseInt($(this).val()) % 6 != 0){
valid = false;
$('#errorMessage').html("That's not divisible by 6");
}
if (!valid){
// Show error message and disable other text boxes
var position = $(this).position();
$('input').not(this).prop('disabled', true);
$("#validation").show();
$("#validation").offset({top:position.top, left:position.left + $(this).width()});
} else {
// Hide error message and enable other text boxes
$("#validation").delay(200).hide();
$('input').not(this).prop('disabled', false);
$(this).parent().next().find('.test2').focus();
}
});
This also works fine with Enter, but this time if Tab is pressed after the user has corrected an error, focus is not passed onto the next text box.
See https://jsfiddle.net/bdgriffiths/sqrugh63/3/
(I also tried performing the validation using:
$('.test').on('input', function() { ...Do the validation... }
Which works fine, but triggers after each keystroke. i.e. When entering "12" the error would trigger after the "1" was pressed - which would be irritating.)

Turns out it was disabling the other inputs that was screwing this up.
Solved the issue by creating a CSS class to make the other inputs look disabled:
.disabledClass {
background-color: #eee;
color: #ccc;
border: 1px solid #ccc;
}
And then force the focus to stay in the cell until the validation error is corrected:
$(this).focus().select();
So the whole function now looks like this:
$(".test2").blur(function() {
var valid = true;
if (parseInt($(this).val()) % 6 != 0) {
valid = false;
$('#errorMessage').html("That's not divisible by 6");
}
if ((valid) || (!($(this).val()))) { // valid or blank
// Hide error message and enable other text boxes
$("#validation").fadeOut(500);
$('input').not(this).removeClass('disabledClass');
} else { // not valid
// Show error message and disable other text boxes
var position = $(this).position();
$('input').not(this).addClass('disabledClass');
$("#validation").fadeIn(500);
$("#validation").offset({
top: position.top,
left: position.left + $(this).width()
});
$(this).focus().select();
}
});
https://jsfiddle.net/bdgriffiths/sqrugh63/9/

Display message in Chrome if wrong type is entered in input field

In Chrome (55.x) if a user attempts to enter mismatched type into an input (in my case a number input) nothing outwardly appears to happen. To enhance usability I'd like to display a popup to let users know they're trying to enter invalid data rather than have them thinking the input is 'broken'.
This is easily achieved with pure JS in FF (which allows mismatched type to be entered, it just isn't valid):
input.addEventListener('input', function() {
if (!this.checkValidity()) {
this.value = '';
console.log('please enter a number!');
}
}
Because Chrome doesn't actually input anything, however, the validity check always passes as the input is empty; it doesn't appear to do anything with the incorrect input except ignore it.
Is there any way to override this behaviour, or otherwise achieve the intended effect?

Sure, you could do a listener for keyup and it will give you the key that was pressed.
<script>
var numInput = document.getElementById("num");
numInput.addEventListener("keyup", function(e) {
if (isNaN(String.fromCharCode(e.which))) {
alert("Must be a number");
}
});
</script>

How about setting a last input value and check like this?
let input = document.querySelector('input');
let lastInput = input.value;
input.addEventListener('input', (e) => {
if (e.target.value === lastInput) {
alert("Input must be a number");
}
lastInput = e.target.value;
});

Trying to get AJAX field to update with returned value (But have to click away before it updates)

Image of form that uses AJAX & JS
I've currently got a maintainer that uses AJAX so when I type a number into the "Order No" field the "Calc" field then gets updated with the "Account" associated with the Order No. It all works however the "Calc" field doesn't fill with the account number until a click away from the Order No field has been done which means that if you were to press the enter key after typing the number the calc is still blank when the checks were made to see if the account and calc numbers are the same.. If you were to type the number then click the "Accept" button the update is then done so the checks then work as expected. So I was wondering if there is a way so that this field could get updated without an extra click.
One solution I came up with was by doing the checks such as account==calc and calc != "" twice so it would run a function where the check would always say that the calc field is blank (as it hasn't updated at this point) which would return an alert saying "Blank" then after returning the alert it would run another function which is exactly the same to do the check again and this time it would work as expected but once the alert is taken out its as if it hasn't got that moments wait which allows for the Calc field to be updated in time.
Its hard for me to post all the code as I use a system that does all the AJAX behind the scenes for you but let me try explain how the AJAX works. Whatever you put in the Order No field will be sent to an external retrieval application that would check to see what account number is associated with the order no and then return it to the Calc field. If then the account and the calc field numbers match submit the form else say its an incorrect order number for that specific customer.
Here are the two JavaScript functions:
function testerRun() {
var abc = ('${row.CUSN760?html}').toString();
var def = document.getElementById("CALCULA001").value;
if (abc == def && abc != "") {
//alert("Order Number & Account Number Match!");
document.getElementById('FORM_M07052').submit();
return true;
} else if (document.getElementById('ORDN760').value == "") {
document.getElementById('FORM_M07052').submit();
return true;
} else {
//alert("Blank First Step!");
finalStep();
}
}
function finalStep() {
if (document.getElementById("CALCULA001").value == "") {
alert("Customers Account Details Need Amending..");
return false;
} else {
var abc = ('${row.CUSN760?html}').toString();
var def = document.getElementById("CALCULA001").value;
if (abc == def && abc != "") {
//alert("Order Number & Account Number Match!");
document.getElementById('FORM_M07052').submit();
return true;
} else if (document.getElementById('ORDN760').value == "") {
document.getElementById('FORM_M07052').submit();
return true;
} else {
alert("Order Number & Account Number Do Not Match!");
return false;
}
}
}​
And here is where the script is called:
<input class="btn btn-primary accept" id="btnaccept" name="btn_accept" onclick="testerRun();return false" type="submit" value="Accept" />
#Shreyas Sorry there is no blur or change as im using a system called MRC and so they use behind the scenes AJAX scripts to handle thigns like this what I don't have access too so I need some sort of work around. Its only an issue when the user clicks enter in the order no field after entering the order number without doing anything else on the form as it doesn't update until the order number is deselected.
document.getElementById('ORDN760').onkeydown = function(event){
if (event.which == 13 || event.keyCode == 13) {
document.getElementById('ORDN760').blur();
testerRun();
}
}
Function call not working though doesn't seem to do anything just sits there after blur.

Add a keypress handler on the Order No field, which listens for the Enter key, and submits the form when Enter is pressed.
document.getElementById('ORDN760').onkeydown = function(event){
if (event.which == 13 || event.keyCode == 13) {
document.getElementById('ORDN760').blur();
return false;
}
}

Get an INPUT value from HTML Input

I am trying to make this Guessing Game. Below is the repo on Github.
https://github.com/christsapphire/Guessing-Game
I wrote the logic in guessing-game.js and it worked fine. Which I am using userGuess = prompt("Guess a number"). However, if I click cancel on this prompt, it will keep asking (maybe thats why??).
I tried to translate this to jQuery, using userGuess = $('#input').val(); and it encountered a bug. The webpage crashed after I click the "Submit" button.
I want when a user click "Submit" button on the webpage, it runs this function below.
function checkUserInput() {
for (var valid = false; !valid;) {
//I suspect these two below
// userGuess = parseInt($('#submit').val(), 10)
//userGuess = parseInt(prompt("Guess a number"), 10);
//-----------
if ((userGuess >= 1) && (userGuess <= 100)) {
if (repeatAnswer(userGuess, userGuessHistory)) {
$('#status').text("You chose that number before! Choose another number!");
} else {
valid = true;
userGuessHistory.push(userGuess);
return true;
}
} else {
$('#status').text("That number is invalid! Please enter a number between 1-100");
}
}
}
I think when I enable userGuess = $('#submit').val() it is repeatedly trying to take an input value from the Input html element, so it crashed.
Please help! Thanks before

It looks like you are really wanting to get the value of the input, not the submit button:
$("#input").val();
Are you trying to attach your function to the submit button? That would be:
$("#submit").click(function(){
CheckUserInput();
});