I'm working form which will show specific div if the model value is equal to some specific string. This is how I'm checking but it's not working, what I'm doing wrong?
v-show="form.status === 'vh' || 'pr' || 'o'"
You can use an array instead with includes/indexOf > -1 (depending on your build setup / browser support) to avoid some repetition
v-show="['vh', 'pr', 'o'].includes(form.status)"
That attribute value isn't a valid javascript expression.
You could modify it to:
v-show="form.status === 'vh' || form.status === 'pr' || form.status === 'o'"
for a quick win, or if you don't like attribute clutter, write a computed/getter for this expression in your script.
Related
I have a form that posts to itself with a text field (for SMS number) and a boolean field (for SMS opt in). I can't seem to get the syntax correct for validation when the end-user goes to post the form.
If they select the bool for opt in, then the form should check the text field for the sms number and if the sms number is empty, display an error.
Here's my javascript snippet:
if (document.getElementById("smsOpt").checked = 'true' && document.getElementById("smsNum").value = ''){
error += "smsOpt";
document.getElementById("smsOpt").focus();
document.getElementById("smsOptError").style.display='block';
}
You can do something like this:
if (document.getElementById("smsOpt").checked && document.getElementById("smsNum").value.trim() == ''){
error += "smsOpt";
document.getElementById("smsOpt").focus();
document.getElementById("smsOptError").style.display='block';
}
For checkbox, the checked property is of type boolean so use of only "checked" is fine. And for the second property you can compare it with an empty string. Single = operator in JS is for assignment and not comparison.
You have to use == or === instead of = in vary conditions.
if (document.getElementById("smsOpt").checked == 'true' && document.getElementById("smsNum").value == ''){
error += "smsOpt";
document.getElementById("smsOpt").focus();
document.getElementById("smsOptError").style.display='block';
}
There is actually no need for using any equality operators in this case. You can do something like this:
if (document.getElementById("smsOpt").checked && !document.getElementById("smsNum").value){
error += "smsOpt";
document.getElementById("smsOpt").focus();
document.getElementById("smsOptError").style.display='block';
}
But if you want to use them, then do it with triple === or double equality == operators. You can check the differences between theese two here.
In JavaScript = is only for assignment, so your if-statement is setting checked=true on the input rather than checking what is it. (Or it actually sets it to true no matter what it was and then evaluates the result of setting the value which will always be true)
You need to use == or better ===
if (document.getElementById("smsOpt").checked === true && document.getElementById("smsNum").value.trim() === '') {
I added trim() also so it ignores if you just insert spaces.
I am building a condition script that searches a comma-separated list of email recipients. There can be multiple recipients and the condition script searches for three (3) specific addresses.
This is not a full-fledged script - it can only include a conditional statement. Our issue is that this field has a character limit of 255... and we have reached it.
Here is the current condition:
email.recipients.toLowerCase().indexOf('email_1') >= 0 || email.recipients.toLowerCase().indexOf('email_2') >= 0 || email.recipients.toLowerCase().indexOf('email_3') >= 0
This is within our character limit - and works - but now we need to add another email address to search for. Is there any way of shortening this condition?
If you can use ES6 (you don't need to worry about Internet Explorer), you can use an arrow function:
['email_1','email_2','email_3'].some(e=>email.recipients.toLowerCase().indexOf(e)+1);
Depending on the particular email addresses, a regex solution might be simpler:
/email_[1-3]/i.test(email.recipients)
Not the perfect answer of course, but you can shorten a little bit with using an alias (be careful about var conflicts, because you cannot use the var keyword inside this expression, meaning the var will be global, it also might not work in strict mode i think).
Just made an answer because it was too long for a comment.. hope ite helps.
var email = {}; email.recipients = 'email_1,email_2,email_3';
console.log((a = email.recipients.toLowerCase()) && (a.indexOf('email_1') >= 0 || a.indexOf('email_2') >= 0 || a.indexOf('email_3') >= 0));
use some:-
['email_1', 'email_2', 'email_3'].some(function(e) {
return email.recipients.toLowerCase().indexOf(e) >= 0;
});
This is a relatively simple question but I cannot figure out why this isn't working.
So I have ng-if statement in HTML where I check condition if its not true. as in:
<div class="new-asset" data-ng-if="$root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8'">
But for some reason this does not work. I also tried:
<div class="new-asset" data-ng-if="($root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8')">
Which has no affect whatsoever... I was reading up and trying to find a solution, someone suggested placing the condition in controller, which would also have performance increase (not 100% sure if it would), as in:
$scope.addNewAssetIf = $root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8';
and then referencing it in html as:
<div class="new-asset" data-ng-if="addNewAssetIf">
But I cannot use this approach due to asynchronous loading, and dependencies. I need to make this work somehow, I get no errors or anything, even though the question_type_id is 1 I still get .net-asset div shown. If I remove OR statement and only have 1 condition it works:
<div class="new-asset" data-ng-if="$root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8'">
Any help is appreciated.
Thanks
I'm ignoring everything angular related and trying to understand the basic logic behind the condition. If the ID == 1 won't it satisfy the second condition which asks it to be different from 8? And isn't that true for cases where the ID is 8?
In other words, don't you need && instead of ||?
This should really be a comment but I don't have enough reputation.
Try using a function:
$scope.addNewAssetIf = function() {
return $root.questionData.question_type_id != '1' || $root.questionData.question_type_id != '8';
};
Could you try using $rootScope instead of $root and include $rootScope as a dependency in your controller? The issue could just be that the variable is not in scope. You could also assign this to your $scope and then reference it directly in your template
Basically, the idea is to try and see if the values are bound to your template fine. You could even try and
{{$root.questionData.question_type_id}}</div>
To verify this, and then if not, start by addressing the root cause.
I'm trying to check if an input has been touched and is empty (without the built in functions in angular).
<form-input is-invalid-on="isTouched && !gs.data.name || gs.data.name.length > 50"></form-input>
If isTouched && !gs.data.name evaluates to true && false then that side of the expression becomes false
So my question is quite simple, how do I make the entire expression evaluate to true if the input has been touched and if it's empty or has a length greather than 50?
I believe it is used as attribute directive.
is-invalid-on="(isTouched && gs.data.name.length) || gs.data.name.length > 50"
Reason? I assumed your gs.data.name is a string. Empty string when evaluated in javascript is still a truthy value. So you must evaluate it to length.
<form-input is-invalid-on="(isTouched && !gs.data.name) || (gs.data.name.length > 50)"</form-input>
can try using () and also check gs.data like isTouched && (!gs.data || !gs.data.name || !gs.data.name.length || gs.data.name.length > 50)
<form-input is-invalid-on="isTouched && (!gs.data || !gs.data.name || !gs.data.name.length || gs.data.name.length > 50)"></form-input>
Angular expression does not work exactly the same than javascript from what i got try this one :
<form-input is-invalid-on="isTouched && gs.data.name.length==0 || gs.data.name.length > 50"></form-input>
Assuming you properly initialized gs.data.name to empty string.
By the way you forgot the > on your tag.
I finally found the reason as to why it was behaving so strange, and as this question has many answers I could not delete it. So I might as well explain what happened.
It turned out that isTouched was always undefined because I was using it outside of the directive (even if it was used in an attribute of the directive) which made the expression undefined && false, resulting in isInvalidOn always being false.
Instead I made it so that I used isTouched later in the actual form-input template as ng-class={invalid: isInvalidOn && isTouched}, resulting in the desired behavior.
Ok so I've been stumped on this one for days and its frustrating me. (Will frustrate me even more if it's something simple I'm overlooking).
I have a form generated in PHP which I want to verify that certain pieces are filled out. I do this via a JavaScript check when the user clicks the submit button.The JavaScript code is below:
<script language="JavaScript">
function checkFields()
{
if (document.getElementById('ldescription').value == '' || document.getElementById('uname').value == ''
|| document.getElementById('sdescription').value == '' || document.getElementById('email').value == ''
|| document.getElementById('platf').value == "Select Group" || document.getElementByID('cate').value == "Select Category" )
{
alert("Please fill out all of the starred (*) items" );
return false;
}
}
</script>
For some reason though this only checks the ldescription field. If that field has text but all the others are empty it carries on like everything was filled out. Also if I change the order of my checks and ldescription is anywhere but the first check, it will do no check whatsoever even when all the fields are empty.
Any ideas?
EDIT:
Got it fixed. Along with the suggestion I marked as correct the document.getElementById('item').value command worked with only textarea boxes but not regular text input boxes. By changing the command to document.MyForm.myTextName.value everything fell into place.
Couple of problems i noticed with your sample code.
The last getElementById call has improper casing. The final d is capitalized and it shouldn't be
Comparing the value to a string literal should be done by === not ==.
JSLint complains there are line break issues in your if statement by having the line begin with || instead of having the previous line end with ||.
The first and third items are most likely the ones causing your problem.
Inside your if condition, when you are breaking a line, make sure that the last token in the line is the OR operator ||.
Javascript does semicolon insertion, so it may be that semicolons are being inserted (automatically, invisibly, by the interpreter) in a bad place.
Try the below code
<script language="JavaScript">
function checkFields()
{
if (document.getElementById('ldescription').value === '' ||
document.getElementById('uname').value === '' ||
document.getElementById('sdescription').value === '' ||
document.getElementById('email').value === '' ||
document.getElementById('platf').value === "Select Group" ||
document.getElementById('cate').value === "Select Category")
{
alert("Please fill out all of the starred (*) items" );
return false;
}
}
</script>
Please use Javascript && operator which returns true if both the elements are true. || operator evaluates to true in case atleast one of the element is true which is what is happening in your case. You can take a look at Javascript boolean Logic