Changing HTML Object Property - javascript

I have a dynamic form validation event listener, which checks if an input is valid or not.
However, even when the input technically isn't valid, the HTML Object Property validity -> Valid is set to "True".
I cant figure out how I can trigger it to change between "True" or "False" based on if it's valid or not in my javascript function.
function validateEventName(){
const reEventName = /^[a-åA-Å0-9]{2,25}$/;
if(!reEventName.test(inputEventName.value)) {
inputEventName.classList.add("is-invalid");
inputEventName.classList.remove("is-valid");
inputEventName.checkValidity();
} else {
inputEventName.classList.remove("is-invalid")
inputEventName.classList.add("is-valid")
}
}
I need to be able to change the inputEventName.valididty.valid between "True" or "False" based on if it's valid or not with the function in my code above.

use document.getElementById()
function validateEventName(){
const reEventName = /^[a-åA-Å0-9]{2,25}$/;
if(!reEventName.test(document.getElementById("dynamicID").value )) {
inputEventName.classList.add("is-invalid");
inputEventName.classList.remove("is-valid");
inputEventName.checkValidity();
} else {
inputEventName.classList.remove("is-invalid")
inputEventName.classList.add("is-valid")
}
}

Related

Validation of the password field and the confirm password field

Good night!
I'm developing a project for study and I really wanted to do the validation of the password field and the validation of the confirmSenha field. The idea is that when the user enters a different password, a message is returned saying that the passwords do not match. Below is the scope of my code.
function validarPasswordConfirm(password, confirmPassword) {
var typedpassword = document.getElementsByName('password').value;
var confirmTypedPassword = document.getElementsByName('passwordConfirm').value;
if(typedpassword !== confirmTypedPassword) {
return { value: false, text: 'Passwords are not the same.' }
} else {
return { value: true, text: '' }
}
}
I'm trying to validate the password field with the confirmpassword field
The function getElementsByName returns an array, so you can't access the value property like that.
I recommend use getElementById instead.
I noticed a few problems with your code.
Firstly, var is not used anymore (see why). You should use an alternative.
Alternatives for var are below.
let - Use this for variables that can be changed.
const - Use this for variables that cannot be changed (constant).
Secondly, getElementsByName() returns a NodeList, which is an iterable (like an array). This means that .value is undefined in a NodeList.
To fix it, change your code to below.
const typedPassword = document.querySelector("#password").value;
const confirmTypedPassword = document.querySelector("#passwordConfirm").value;

How to change the text color a string in a set in a dialog

I have created a set 'result = new Set()' and I store values in the result set by calling the addValues function. This addValues function returns boolean if the values are added to the set or returns false.
Then I iterate the values stored in the result set and I use and angular dialog to display the values present. In the result set I have values like this.result.add('Title'), this.result.add('Sub-Title') and this.result.add('End') and I want these text should appear red in color in the angular dialog
My attempt:
const test = this.addValues
if (test) {
this.result.forEach(name => {
this.values.push(name)
})
this.dialog.open(this.values)
}
public get addValues() {
this.result.add('Title')
this.result.add('a')
this.result.add('b')
this.result.add('Sub-Title')
this.result.add('c')
this.result.add('d')
this.result.add('End')
this.result.add('e')
if (this.result.size > 0) {
return true
} else
return false
}
You should try this official Angular Material approach so as to create a dynamic dialog component with your predefined template and CSS preferences.
With your approach this.dialog.open(this.values) a dialog pop up is opened displaying this.values but you have no control on the template, nor the logic.

Not able to identify duplicate value in Javascript Array

Hi I have input(inside ngFor, so same input field created with length of my array) in my HTML and binding to my ngModel and i have ngModelChange function as below:
onChangeReference(value: any, account: any, option: any) {
// this.referenceArray = Object.keys(this.your_reference).map(key => this.your_reference[key]);
console.log(this.referenceArray, value, 'huhu');
let tmpReference:Array<any> = [];
if (value) {
if (_.includes(this.referenceArray, value)) {
console.log('item und');
option.isRefDuplicate = true;
// this.referenceArray.pop();
} else {
console.log('item illa');
this.referenceArray.push(value);
option.isRefDuplicate = false;
}
}
}
Basically what i need to achieve is if there is any duplicated value in this.your_reference Array, i need to show error below that particular input field. I could able to achive it 90%, but now the problem is if enter "aaa" in one input field, and in other input field i key in the same value "aaa", working fine. showing error message. But when i backspace and remove one value its actually a new value "aa" which shouldnt be in my this.your_reference array. But it still showing error. How to fix this guys. Any idea?

Using Filter Function to Find Values Equal to False and Setting to True

In my Angular app I have a function that drills down to an array, and then uses a filter function to pull out values in a new array where "completed" is "false".
This is working as expected. And the way our data is, there is always one object in the array that has the property for "completed" set to "false", so I can target [0] to get to that. So, from there all I need to do is set it to "true". However, for whatever reason, how to accomplish this last step is eluding me.
This is my whole function, and what I've tried thus far:
private completeLastWorkflowStatus() {
let currentService = this.checkDiscipline();
for (let service of this.client.services) {
if (service.service === currentService) {
let targetWorkflow = service.workflow;
let inCompleteWorkflow = targetWorkflow.filter(workflow => workflow.completed === false);
console.log(inCompleteWorkflow);
if (inCompleteWorkflow[0].completed === false) {
inCompleteWorkflow[0].completed === true;
console.log(inCompleteWorkflow[0].completed);
}
}
}
}
For the last console.log listed above, I still get "false" as the value. What am I missing here? How can I set the value of "completed" to "true" for this one object in the array?
inCompleteWorkflow[0].completed === true; is not assignment. Do inCompleteWorkflow[0].completed = true;

Form validation using filter_var

I am working on an assignment using javascript. I am attempting to use filter_var to test if my form has empty fields but I cannot get it to run.
I'm not confident that my Syntax is right.
function validate_reg_form(form)
{
var form = "";
if (filter_var(form, FILTER_VALIDATE_BOOLEAN))
{
alert("validate_reg_form() not yet implemented");//remove this
}
}
filter_var is a PHP function. It does not exist in JavaScript. The exact equivalent is:
var truthyBooleanStrings = ['1', 'true', 'on', 'yes'];
function validateRegForm(form) {
var form = '';
if (truthyBooleanStrings.indexOf(form) !== -1) {
// …
}
}
Maybe that’s not the right approach for
test if my form has empty fields
, though. If you want to test that something is not an empty string, just use !== '' or the implicit truthiness of non-empty strings, as in
if (form) {
// Not empty!
}

Categories