Develop Reference

How to add and remove CSS classes based on validation errors on client side?

Regarding .net core mvc, how do I add and remove classes for <span asp-validation-for="Input.FirstName"> based on a validation error or even between different errors?
<div class="form-group offset-sm-2 col-sm-8">
<label asp-for="Input.FirstName" class="control-label register-heading-style"></label>
<input asp-for="Input.FirstName" class="form-control form-control-valid rounded-0" placeholder="John" />
<span asp-validation-for="Input.FirstName" id="FirstNameError" class="text-danger form-control-invalid invalid-bg"></span>
</div>
Is there a way in JS perhaps to check for errors on input (the errors that are automatically displayed under asp-validation-for="Input.FirstName")?
Thank you

if you want to change class by different error. I think you can't change class per one error. but i think is better use [TempData] and use specific span and show each one when that value is not empty.or null. for this approach you must validate what you need and feel [TempData] for that.
for example:
if(TempData["error"]!=null)
{
<span>this is an error</span>
}
if(TempData["success"]!=null)
{
<span>this is susccess</span>
}
if(TempData["warning"]!=null)
{
<span>this is warning</span>
}

Here is a demo about if the span which id is Input_FirstName-error has error infomation,add class customClass to it.
$(document).ready(function () {
$("#FirstNameError").on('DOMSubtreeModified', function () {
if ($("#Input_FirstName-error").length > 0 && $("#Input_FirstName-error")[0].innerText != "") {
$("#Input_FirstName-error").addClass('customClass');
}
});
});
result:

How to use innerHTML for Accordion (PrimeReact)?

In my React project, I am using the PrimeReact library to display some Accordions. But I need to create them dynamically and this is the current result:
As you see, the html tags are also shown in the answers of the faqs. I tried using innerHTML and dangerouslySet... but to no success.
Here is my relevant code:
createAccordions = () => {
const allFAQs = this.state.allFAQs;
let accordions = [];
for (const faq of allFAQs) {
const accordion = <AccordionTab header={faq.question} dangerouslySetInnerHTML={{__html: `<p>yo man</p>`}}></AccordionTab>;
accordions.push(accordion);
}
return accordions
}
render() {
return (
<div className="component">
<h1 style={{textAlign: 'center'}}>{this.state.pageTitle}</h1>
<div className="p-grid">
<div className="p-col-3">
</div>
<div className="p-col-6">
<Accordion>
{this.createAccordions()}
</Accordion>
</div>
<div className="p-col-3">
</div>
</div>
</div>
)
}
How can I properly set the innerhtml for the accordions?

I took a look at the source and found that the library tries to render the children you pass to it. I see you tried dangerouslySetInnerHTML, but set it on the AccordionTab itself instead of the child passed into it.
I set up a quick demo on CodePen. I passed in a div container to set the innerHTML on, and it seems to work!
<AccordionTab header="Demo">
<div dangerouslySetInnerHTML={{ __html: "<ul><li>I am HTML</li></ul>" }}></div>
</AccordionTab>

Why does my $(".selector").show(900); code only fire-up in the browser console, but never in the helper?

My $(".submitNumberForm").show(900); code in my Template.home.helpers fails to fire-up. However, when the code is run in the browser console, it works perfectly.
The fact that the $(".submitNumberForm").show(900); fails to run in the Template.home.helpers means that an HTML form represented by class name: .submitNumberForm is never shown and remains hidden.
I would be grateful if someone would kindly explain what is wrong with my code.
Find below my helper code: ../client/main.js, pay special attention to the $(".submitNumberForm").show(900);.
Template.home.helpers({
'displaySubmitForm': function () {
var verificationCode = Meteor.user().profile.telephoneNumberVarificationCode;
var verificationCodeTest = Meteor.user().profile.telephoneNumberVarified;
if( typeof verificationCode === 'undefined' && typeof verificationCodeTest === 'undefined'){
console.log("displaySubmitForm verificationCode: " +verificationCode);
console.log("displaySubmitForm verificationCodeTest: " +verificationCodeTest);
alert("displaySubmitForm: TRUE");
$(".submitNumberForm").show(900);
return true;
}
else {
alert("displaySubmitForm: FALSE");
$(".submitNumberForm").hide(900);
return false;
}
}
});
When the home page is refreshed, the browser console prints out:
displaySubmitForm verificationCode: undefined
displaySubmitForm verificationCodeTest: undefined
and the alert function displays a popup displaying: displaySubmitForm: TRUE, however the $(".submitNumberForm").show(900); doesn't fire-up!
Find below my: <template name="home"> code ../client/main.html. Note that The {{displaySubmitForm}} at the top/begining of the template, displays the words true, however the rest of the HTML form submitNumberForm doesn't display at all. This, again is an indication that the $(".submitNumberForm").show(900); code doesn't fire-up
<template name="home">
{{displaySubmitForm}}
{{#if displaySubmitForm}}
<div class="form-group submitNumberForm">
<div class="col-sm-10">
<input type="number" class="form-control" id="telephoneNumber" placeholder="Enter Number" name="telephoneNumber">
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" id="submitNumber" class="btn btn-primary btn-block">Submit</button>
</div>
</div>
</div>
{{else}}
{{/if}}
</template>
Find below my CSS file: .../client/main.css
.submitNumberForm{
display: none;
}
Just to clarify, the html form submitNumberForm is meant to be hidden by default and only show $(".submitNumberForm").show(900); based on the conditions specified in the Template.home.helpers
Again, when I copy code from the helper, paste and run in the console, the Html form submitNumberForm appears. Can anyone kindly explain to me why this $(".submitNumberForm").show(900); doesn't fire-up in the helper as its supposed to do?

When you use {{#if displaySubmitForm}} it means: Generate the html code between the {{#if}} and {{/if}} tags when the displaySubmitForm helper returns true.
The html elements inside your if doesn't exist when your helper is executing.
So your selector: $(".submitNumberForm") in your code doesn't select anything, because the submitNumberForm element doesn't exist yet.
After that, it works on the console because the helper already executed and the html is now generated.

Making text field editable on button click

I am pretty much new to React so apologies for lack of code here.
Lets say I have a text field which shows the name of a user. When I click a button, I want this field to be editable.
Can this be done in ReactJS?

Use like this,
ES6 js:
class App extends React.Component{
constructor(){
super()
this.state={disable:true,
val:"username"}
}
handleClick(e){
this.setState({disable:!this.state.disable})
}
render(){
return(
<div className="wrapper">
<input type="text" disabled={this.state.disable} value={this.state.val}/>
<input type="button" value="Enable/Disable" onClick={this.handleClick.bind(this)}/>
</div>
)
}
}
Working Jsbin

Assign dynamic controller in ng-repeat

I am new to Angularjs. I've tried a example in here.
file index.html:
<div ng-repeat="data in ctl.dataList">
<div class="col-md-6">
<textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea>
<button ng-show="ctl.showCloseBtn">X</button>
</div>
</div>
file app.js:
app.controller('FocusController', function() {
this.showCloseBtn = false;
this.dataList = [{
value: "one"
}, {
value: "two"
}];
this.mouseOverFunc = function() {
this.showCloseBtn = true;
};
this.mouseLeaveFunc = function() {
this.showCloseBtn = false;
};
});
I want to show close button when mouse overed every textarea like facebook chat in this picture. But my issues is when mouse over one of textarea then all X button was showed.
How do i assign dynamic controller to every textarea or how to do like facebook chat ?
Thanks for your help

You can do with CSS as well as AngularJS. I suggest you to do with CSS which is Simple. And Do your ng-click on the button.
This Plunker Demo is using with CSS and added ng-click there. Please check the styles and classes added.
Styles
<style>
.field:hover .btn-close {
display:block;
}
.btn-close {
display:none;
}
</style>
HTML
<div ng-repeat="data in ctl.dataList">
<div class="col-md-7 field">
<textarea></textarea>
<button ng-click="doSomething()" class="btn-close">X</button>
</div>
</div>
This Plunker Demo is with AngilarJS as explained in the other answer by New Dev.
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea></textarea>
<button ng-click="doSomething()" ng-show="data.showX">X</button>
</div>

Typically, it would be best to create a directive for this functionality and encapsulate all the logic of clicking the "x" button, but for simplicity you could also leverage the child scope created by ng-repeat, and do the following:
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea type="text"></textarea>
<button ng-show="data.showX" ng-click="ctl.close(data)">X</button>
</div>
</div>
ng-repeat="item in items" creates a child scope for each item, so you can set values on the child scope.
Here's your modified plunker
EDIT:
As suggested in the comments, if you have nothing more complex than showing or hiding the button, definitely CSS approach is the simplest way to go. Use the above example then as an illustration for how scopes work.