Validation of Style

Is there a way to translate the following CSS code into JavaScript? Basically, I want it to apply the style rules after the onchange event.

.appnitro input:required:valid, .appnitro textarea:required:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

.appnitro input:focus:invalid, .appnitro textarea:focus:invalid { 
    box-shadow: 0 0 5px #5d45252;
    border-color: #b03535;
}

<script>
function myFunction(){
   // Code goes here
}
</script>

<form id="form_664184" class="appnitro"  method="post" action="">
    <input type="text" id="element_3"  name="element_2_1" value="Title" onchange="myFunction()" required />
</form>

Answer №1

Absolutely, that's correct. This is the proper way to do it:

yourElement.style.borderColor =  "#5cd053";
yourElement.style.boxShadow = "#5cd053";

Retrieve the element using its ID, class name, or any other identifier.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can you ensure your CSS code is functional across various browsers?

I have been exploring CSS and HTML for about a week now, but I am facing a challenge that has me stuck for the past thirty minutes. The issue lies in adapting this code to work smoothly across different browsers. While it aligns images in a row of four per ...

Where can content-tag and main-tag be found in vue-virtual-scroller?

I've been trying to wrap my head around the vue virtual scroller. I couldn't help but notice in the demo that it utilizes a few HTML attributes... <virtual-scroller v-if="scopedSlots" class="scroller" :item-height="itemHeight" :items="items" ...

What is the process for saving an SVG element from an HTML page as a downloadable text file?

I've been practicing creating SVG elements from scratch on an HTML page using Javascript. The texts within the SVG element are styled with typefaces fetched from the server through a "@font-face" declaration in the CSS file. It's been quite succe ...

Error in node.js: Headers have already been sent

I have set up a routes.js file in nodejs and all routes are working fine except for the "UPDATEAUTH" route. I am facing an error which says "Headers already Sent". The specific line causing this issue is -> router.post("/updateauth",function(request,res ...

Tips on styling div elements to act as table cells

Is there a way to style divs with ids 1&2 and have the inner divs act like a table? Specifically, I want the first column to display a label, the second column to display an input field, and the third column to display a button. I attempted to adjust ...

Automatically organize <mat-list-item> elements within a <mat-list> container

Here is the code snippet: <div> <mat-list fxLayout="row" dense> <mat-list-item *ngFor="let label of labelsList"> <!-- just an array of strings --> <button mat-button> ...

What is the reason behind the vanishing of the input field while adjusting the

Why is the input field getting cut off when I resize my browser window, even though I'm using percentages? Here is a screenshot for reference: https://i.sstatic.net/4JrWd.png Shouldn't it resize automatically with percentages? Thank you! Below i ...

Vue.js component is failing to display on the page

I am struggling with a component that should use axios to fetch some data for my page, but the request is not being made. Below is the code snippet: Snippet from App.vue: <template> <div id="app"> <Prices/> </div> </tem ...

What is the best way to combine HTML and JavaScript code within a single JavaScript file?

Is there a way to include a responsive iframe without any scroll in multiple websites by using just one line of code? I found this snippet that seems promising: <script src="testfile.js"></script> The testfile.js contains the necessary HTML a ...

Material-ui 4.11.4 - Grid: For items to be displayed correctly in a column, it is necessary to set the container direction to 'row' (??)

I have a requirement to display multiple divs in a column layout, centered along the page axis and stretched in width based on the available space. I am currently using the latest version (4.11.4) of material-ui which includes both the <Grid> contain ...

Can a small white pop-up be triggered by clicking a button?

While exploring the website , I noticed that clicking on Availability Zones opens a small window with text on the right side of the page. Is it possible to achieve a similar feature on a leaflet map without using JavaScript? This functionality would be tri ...

ReactJS component update issueUpdate function malfunctioning in ReactJs

Hey there, I could really use some assistance with a React component that I'm working on. I'm fairly new to React and what I'm trying to do is retrieve a list of available languages from the backend and display them in a dropdown. Once the u ...

Utilizing jQuery to invoke a function at the conclusion of another function's execution

Can someone explain how jQuery can achieve the following? $('.test').css().otherThing...... etc I'm attempting to accomplish this with prototype: var myPrototype = function () {}; myPrototype.prototype.console1 = function() { console.lo ...

Organize the array following the guidelines of a card game with a versatile approach

deck = ['Jack', 8, 2, 6, 'King', 5, 3, 'Queen', "Jack", "Queen", "King"] <!- Desired Result = [2,3,5,6,8,'Jack','Queen','King'] Explore the challenge: Arrange the ...

Activate event in jQuery when clicking on a blank area, away from any div element

I need help figuring out how to hide a div when empty space on the margins of the page is clicked, as opposed to just any area outside of the div. I've managed to achieve this functionality when certain other divs are clicked, but I'm stuck on im ...

Crisscrossed JavaScript Object: recursion and "intricate" conversion (using lodash)

Apologies for the complexity of this example; I've condensed it as much as possible to demonstrate what I'm aiming for I have a complicated structure that needs to be traversed and transformed based on certain conditions. Here's a brief exa ...

Automatic padding within Bootstrap5

I'm struggling to understand why I am experiencing a consistent padding at the bottom of my container in Bootstrap5. I attempted to use align-items-center within the row to center the content, but it had no effect. <!DOCTYPE html> <html la ...

Guide on utilizing Vue to trigger an API call when the input box loses focus

I am currently facing challenges while trying to learn vue, and I am not sure how to proceed. I would greatly appreciate any assistance! To begin with, I want to acknowledge that my English may not be perfect, but I will do my best to explain my issue tho ...

PHP POST data not displaying in output

Having an issue with displaying the chosen value from a database enum in a text field on my website. The enum table has options like Bachelor of Science, Master of Science, Bachelor of Education, and Master of Education. I want to show the selected option ...

Ensure that a distinct cross button is included within the text or search input and positioned to float alongside the text for

Is there a simple method to include a clear button that hovers after the text in an input field when using a search type input? <input type="search"> ...