If query fails with AND but works with OR - javascript

I search a JSON tree with jQuery on keyup-event. If the input is equal to the desired entry the input will disabled.
Now I need to call a function if they all are filled and correct. The if queries are long so i have written them into variables.
I've tried this, but it fails:
if (simple_present && simple_past && past_participle) {
alert('All right!');
}
Now, when I write something like this, it works:
if (simple_present || simple_past || past_participle) {
alert('All right!');
}
Here's a fiddle of what I have so far.
Any ideas?
BTW: What is the best way to combine long if queries with reg expressions​?

Consider this:
var json = {
"vocables": {
"irregular": {
"sein": {
"simple_present": "be",
"simple_past": "was were",
"past_participle": "been"
},
"schlagen": {
"simple_present": "beat",
"simple_past": "beat",
"past_participle": "beaten"
},
"werden": {
"simple_present": "become",
"simple_past": "became",
"past_participle": "become"
}
}
}
};
var word = $( 'h1' ).text();
$( 'input' ).on( 'keyup', function () {
if ( this.value === json.vocables.irregular[ word ][ this.id ] ) {
$( this ).prop( 'disabled', true ).next( 'input' ).focus();
}
if ( $( 'input:not(:disabled)' ).length === 0 ) {
alert( 'SUCCESS' );
}
});
Live demo: http://jsfiddle.net/NnAMu/1/
As you can see, I have:
changed the JSON structure to suit my needs better,
cached the current word into a variable.
With those changes, the resulting "keyup" handler code is much simpler.

You run all of the following code in the same event handler for each element:
$this.attr('id') == 'simple_present'
$this.attr('id') == 'simple_past'
$this.attr('id') == 'past_participle'
They can't be all true, so && is guaranteed to give you false.

Add a debug line just before the if:
alert( simple_present.toString() + '\n' + simple_past.toString() + '\n' + past_participle.toString() );

Related

Extend function to prevent paste inside an input field

I'm currently trying to prevent typing everything instead of numbers and points inside a an input field. The problem is that pasting letter or strange things still works. So is there a way to prevent it in my function?
I could do a HTML part like onpaste="return false;" but maybe there is a better solution that uses my available function. Thanks for your help!
jQuery( document ).ready( function ( $ ) {
$( document ).on( "keypress keyup paste", "#test", function ( event ) {
let input = $( this ).val();
console.log(input);
console.log(event.which);
if ( ( event.which !== 46 || $( this ).val().indexOf( '.' ) !== -1 ) && ( event.which < 48 || event.which > 57 ) ) {
event.preventDefault();
} else if ( ( input.indexOf( '.' ) !== -1 ) && ( input.substring( input.indexOf( '.' ) ).length > 2 ) ) {
event.preventDefault();
}
} );
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="test"/>
Edit:
I also found out that the sign ^ still works too but has no event? How is this possible?
The idea is to only allow numbers with points and two decimals like 22222.22 for example.
Edit 2:
Input type number is not working because it allows more than just numbers and points.
<input type="number"/>
Somehow below code handles ctrlX, ctrlV, ^, and allows decimal input
const input = document.querySelector('input')
let old = input.value
input.addEventListener('input', function() {
if (!this.checkValidity()) {
this.value = old
} else {
old = this.value
}
})
<input type="text" pattern="\d+(\.[\d]{0,2})?"/>
For dynamically added input (by using event delegation) we could store the old attribute on the input itself
jQuery( document ).ready( function ( $ ) {
$( document ).on( "input", "input.decimals", function ( event ) {
if (!this.checkValidity()) {
this.value = this.dataset.old || ''
} else {
this.dataset.old = this.value
}
return true
})
const pattern = '\\d+(\\.[\\d]{0,2})?'
document.querySelector('div').innerHTML += `<input class="decimals" type="text" pattern="${pattern}"/>`.repeat(2)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div></div>
You can try to explicitly disable cut, copy, or paste functionality on targeted element (e.g: #txtInput element) using the snippet below:
$(document).ready(function(){
$('#txtInput').on("cut copy paste",function(e) {
e.preventDefault();
});
});
More on how to do this here: How to prevent pasting into input fields.
Have you tried the simple solution which is to use input of type number?
e.g. <input type="number" />
There is a caveat, the letter 'e' can be typed, i.e. Euler's Number

Javascript Error /[qwertyuiopasdfghjklzx-cvbnm?.//:&#!]/: Range out of order in character class

So when i type it into the console this error pointing to /[qwertyuiopasdfghjklzx-cvbnm?.//:&#!]/: Range out of order in character class . I tried pressing i and it would come up with the same thing. This is a script for https://web.roblox.com. I'm using the replace() on a string and that where the error is.
/*
Version 0.1
Press i to get id
Please read the settings
*/
//Settings
//Welcome Message
var welcomemsg = "Off";//Write On or Off
//Functions
function welcome()
{
if (welcomemsg == "On") {
window.alert("Welcome id getter loaded press i when on an id page to get item id")
}
else if (welcomemsg == "Off") {
console.log("Welcome id getter loaded press i when on an id page to get item id")
}
}
(function () { var script = document.createElement('script'); script.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'); document.body.appendChild(script);}());
window.onload = function() {
load()
};
function load()
{
$( "body" ).on( "keydown", function( event ) {
if (event.type === "keydown" && event.which === 73){
get();
}
$( "#log" ).html( event.type + ": " + event.which );
});
}
function get()
{
var id = window.location.href.split("=").pop().replace(/[qwertyuiopasdfghjklzx-cvbnm?.//:&#!"]/g, "")
if (id == "") {
alert("Your not into an profile, model ,gear page or place!")
}
else {
window.prompt("Id:", id)
}
}
//Running functions
welcome()
You have a "-" character in there, and "x-c" is interpreted as a range (which is, for obvious reasons, invalid). Try escaping the - with a backslash ().

How to use JavaScript (or JQuery) to check if an input is empty or has a certain string?

I'm doing some validation on a calculator form I'm building and I want to a show a 'Please fill this field' message if the user hasn't entered a figure into the input.
By default, the field has a '0' in it.
So I want to check if the field is empty or has the string '0'.
Should also mention that there is a script running that prevents the user from entering non-numeric characters.
This is part of a series of checks in if/else statements. For this case, I already have one condition (to pick up a previous choice the user has made).
So I have something like:
if ( calcChoice == 1 && $( "#input-loan" ).val() == "0" ) {
console.log("User input missing");
$( "#input_loan" ).addClass( "error" );
} else if ( calcChoice == 1 && $( "#input-pay" ).val() == "" ) {
console.log("User input missing");
$( "#input_loan" ).addClass( "error" );
} else if ( calcChoice == 2 && $( "#input-loan" ).val() == "0" ) {
console.log("User input missing");
$( "#input_loan" ).addClass( "error" );
} else if ( calcChoice == 2 && $( "#input-pay" ).val() == "" ) {
console.log("User input missing");
$( "#input_loan" ).addClass( "error" );
I'd like to streamline this a bit. What I'd really like is something like:
if ( calcChoice == 1 && $( "#input-loan" ).val() == "" || "0"; ) {
//do something;
}
Any ideas?
I've looked at the following related questions but haven't been able to work it out from their answers:
How do you check for an empty string in JavaScript?
JavaScript: Simple way to check if variable is equal to two or more values?
var goodValues = ["","0"];
if( goodValues.indexOf( $( "#input-loan" ).val() ) !== -1 ) {
//good
}
You could write
if($( "#input-loan" ).val() + 0 == 0)
{
// do smth.
}
Not sure if this approach is good but it works for me
if ( calcChoice == 1 && ($( "#input-loan" ).val() == "" || $( "#input-loan" ).val() == "0") ) {
//do something;
}
Try this seems to be mistaken here. Similarly, you can also use
$.isEmptyObject(object) to ensure whether the value is empty or not.
A solution could be based on the following.
var loanInput = $( "#input-loan" );
var payInput = $( "#input-pay" );
var loanValue = +loanInput.val(); //+ converts string to number
var payValue = +payInput.val();
if (!loanValue) {
loanInput.addClass( "error" );
}
if (!payValue) {
payInput.addClass( "error" );
}
As an aside, note that instead of having a default value of "0" in your inputs you could set the placeholder attribute of the input to 0.
<input type="text" placeholder="0" />
That way you don't need to check if the input is "0", and you could actually treat "0" as a valid input if desired.
Thanks for answering everyone. Really good solutions here. Seems so obvious now to have a '0' placeholder and only test for empty. Also akmed0zmey's solution is ingenious.
I forgot to mention that there is no need to trim as I have a script running that prevents the users from putting in non-numeric characters, including spaces. I have updated the original question to include this.
I went with RicardoC's solution as it most closely answers the specific problem I asked and it's a good method to retain for the future - I could have a series of strings to test against.
Thanks!
For the record, this regex test also works. It's testing for an empty string or the string '0':
if ( calcChoice == 1 && /^(|0)$/.test( $( "#input_loan" ).val() ) ) {
//do something
} else if ( calcChoice == 2 && /^(|0)$/.test( $( "#input_pay" ).val() ) ) {
// do something
}
I had tried this before but there must have been a problem elsewhere in my code. Now it works. (Cheers to Nils in the comments to the question for pointing out that this works).

JavaScript on input event

I have a form with CSS animations, when form field is selected labels animate out and when text is filled labels shouldn't animate back. And this works for input fields but not with textarea. Can't seem to find the problem, and I've been playing with it for some time now.
This is my JS code:
<script>
(function() {
// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}
[].slice.call( document.querySelectorAll('input.input_field', 'input-textarea.input_field-textarea') ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}
// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );
function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}
function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
EDIT: This was the problem, code was going like this:
document.querySelectorAll('textarea.input_field-textarea', 'input.input_field'))
Instead of removing those 2 extra '':
document.querySelectorAll('textarea.input_field-textarea, input.input_field'))
Thanks to all for help!
Change the input-textarea.input_field-textarea selector to textarea.input_field-textarea. There's no such <input-textarea/> element:
[].slice.call(document.querySelectorAll('input.input_field', 'textarea.input_field-textarea')).forEach(function(inputEl) {
// ...
});

Unsure how to perform action if all form inputs do NOT contain specific values

This is more of a question on how to approach this scenario.
I have a form, and I need to perform an action if any form input contains ".ca", "canada" or "canadian", but I also need to reverse that action if the fields do NOT contain these strings. Ideally, this would action would trigger (if needed) as the form is completed rather than when submit is clicked.
My code to check for ".ca", "canada", or "canadian"
var optInFieldIsVisible = false;
var optInField = jQuery( 'input[name*="email"]' );
jQuery("*").find('input').bind('input propertychange', function() {
if (/.ca$|canada|canadian/i.test( jQuery(this).val() ) ) {
optInFieldIsVisible = true;
optInField.closest( '.formField' ).show();
// show special form field because reference to canada is present
}
else {
if (optInFieldIsVisible == false) {
optInField.closest( '.formField' ).hide();
// hide special form field because reference to canada is removed
}
});
The problem with the above code is that it has no condition that is ever valid for the special field will never re-hide once it is activated.
If I remove the "if (optInFieldIsVisible == false)" under the else-condition the field will show and hide properly if the user works within the currently selected input, BUT it will then re-hide as soon as anything is typed into the next input (since the regex returns false in the now-selected new form input).
Clearly a flag variable isn't the solution, and some sort of counter variable I also can't see as working here. Does anyone have pointers?
EDIT:
See live demo http://jsbin.com/toyin/1/edit
I'm not sure I understand you correctly, but this may be what you want:
var optInFieldIsVisible = false;
var optInField = jQuery( 'input[name*="email"]' );
jQuery("*").find('input').bind('input propertychange', function() {
if (/.ca$|canada|canadian/i.test( jQuery(this).val() && !optInFieldIsVisible ) ) {
optInFieldIsVisible = true;
optInField.closest( '.formField' ).show();
// show special form field because reference to canada is present
}
else if (optInFieldIsVisible){
optInFieldIsVisible = false;
optInField.closest( '.formField' ).hide();
// hide special form field because reference to canada is removed
}
});
Checkout the fiddle, is it the thing you want to do?
var optInFieldIsVisible = false;
var optInField = jQuery( 'input[name*="opt-in"]' );
optInField.closest( 'div.formField' ).hide();
jQuery("*").find('input').bind('input propertychange', function() {
if (/.ca$|canada|canadian/i.test( jQuery(this).val() ) ) {
optInFieldIsVisible = true;
optInField.closest( 'div.formField' ).show();
}
else {
optInFieldIsVisible = false;
optInField.closest( 'div.formField' ).hide();
}
});
This is what I came up with to address this. Added a new function:
/* clear required field on focusout if triggers are removed from all fields */
jQuery("*").find('input').focusout(function(){
var eList = [];
jQuery("*").find('input').each( function() {
if ( /.ca$|canada|canadian/i.test( jQuery(this).val() ) == false ) {
eList.push(false);
}
else {
eList.push(true);
}
})
if ( jQuery.inArray(true, eList )==-1 ) {
optInField.closest( '.formField' ).hide();
}
})
Also removed the else statement from my original code, as that was no longer needed with the above added. See http://jsbin.com/toyin/3/edit

Categories

Resources