Jquery alters the border of a textbox with a single modification

I attempted to implement a validation using regular jQuery and managed to accomplish half of it successfully. When I try to submit an empty field, the textbox border turns red, but if I fill in the value and click the button again, the border doesn't change color. Below is my jQuery code:

 if ($.trim($("input[id$='prgIDText']").val()).length < 1) {
            errMsg += "Program ID cannot be blank <br/>";
            $("input[id$='prgIDText']").css("border", "2px solid red");
        }
        else {
            alert($.trim($("input[id$='prgIDText']").val()).length);
            $("input[id$='prgIDText']").css("border", "border:1px solid #CCC");
        }

Answer №1

Your second CSS value includes an unnecessary "border" property.

.css("border", "border:1px solid #CCC");

Instead, it should be:

.css("border", "1px solid #CCC");

Check out this functional JSFiddle example:

http://jsfiddle.net/9s450afx/

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

Generating PDFs with high resolution in PHP

I am currently utilizing the TCPDF library to convert HTML into PDF format. However, the resulting PDF files have a low resolution of 72 dpi. Is there a more effective method available to generate high-resolution PDFs at 300 dpi? Thank you ...

The reason why the div appears below the image

Is there a way to position the div above the image rather than below it, even when setting the z-index attribute in the code? The current code structure is as follows: <main id="content" role="main"> <div style="text-align: center"> & ...

Verify whether the cookie information is in an array format

As visitors click on products on my site, I am storing their IDs in a cookie. Each click adds the new ID to an array stored in the cookie. This is how I set up the cookie and its current value after a few clicks: var cookieArray = []; cookieArray.push( ...

Tips for identifying the clicked location inside an element using JavaScript?

Is there a way in JavaScript to find out the exact position of a click within an element, like its distance from the left, right, or center? I'm struggling to determine whether the clicked area is on the left, center, or right side. https://i.stack.i ...

Declare webpage as manager for mailto links

One interesting feature I've observed in various web-based email providers is the ability to add the website as the default mailto links handler in browsers like Firefox and Chrome. This means that when clicking on a mailto: link, it will automaticall ...

Issue with binding a 2D array to a repeater - troubleshooting required

Here is an array I'm working with: string[,] productData = new string[5,7]; I connected it to a repeater and called a method like this: <img src="<%# getPhoto1WithReplace(Container.ItemIndex) %>" The method is defined as follows: public ...

Is there a possibility of CLOB data getting shortened when shown in a SELECT query? If this happens, what is the method to display it in

I have a Varchar2 field in my table that needs to be converted to a CLOB. I am uncertain about possible truncation of the data when selected. Is there a limit on this and could it be influenced by the database settings? When using TOAD or SQLPLUS, I notic ...

Switch out bootstrap icons for angular material icons

I'm currently in the process of transitioning from using Bootstrap to Angular Material in an existing application. I need assistance with replacing the Bootstrap icons with Angular Material icons. Any help is greatly appreciated. <md-button class= ...

Ways to clear form only after successful insertion of data (Ajax)

Currently, I have a form that is being processed using ajax. When the form is processed, a PHP file is called through ajax to validate the data. If there are any errors, they are displayed. If not, the data is inserted into the database and a success mess ...

Unable to incorporate node-vibrant into Angular 7 project

Currently facing some challenges while attempting to integrate node-vibrant into my Angular 7 project: -Successfully imported with import * as Vibrant from 'node-vibrant';, but encountering a warning in VS Code: Module '"/Users/xxxx/Docume ...

Tips for changing array items into an object using JavaScript

I am working with a list of arrays. let arr = ["one","two"] This is the code I am currently using: arr.map(item=>{ item }) I am trying to transform the array into an array of sub-arrays [ { "one": [{ ...

My AngularJs code seems to be throwing some errors

I recently started learning Angularjs and here is the code I have written: <!DOCTYPE html> <html> <head> <title>ng-Messages Service</title> <script src='https://ajax.googleapis.com/ajax/libs/jquery ...

How can I trigger a click event on a link using JQuery?

One of my links has the unique id: nyhedsklik There is a function associated with this link that activates when it is clicked: $('a.poplight[href^=#]').click(function() { var popID = $(this).attr('rel'); //Fetching Popup ...

The JavaScript timer fails to recognize the date as valid, even when the correct format

I am working with a string assembled from cookies that are inputted by the user in a form. Below is the code snippet: var monthCookie = getCookieValue("monthUserPref") var dayCookie = getCookieValue("dayUserPref") var hourCook ...

Tips for creating a layout with two responsive columns side by side: one with text and the other with an image, using Bootstrap 4

How can I create two responsive columns in Bootstrap 4, one with text and the other with an image, similar to the layout shown in the image below? <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" int ...

Modifying the location of an element in an array with jQuery

Using jQuery and JavaScript var movableItems = new Array(); movableItems.push($('#cloud1')); movableItems.push($('#comment1')); if(leftPressed == true){ for(var i = 0; i < movableItems ...

Ways to retrieve information from a intricate JSON structure?

Can anyone help me understand why I am unable to access the data in the detail option of the JSON? My goal is to load the firstName, lastName, and age into a list for each object. var data = { "events": [{ "date": "one", "event": "", "info ...

Ways to incorporate customizable text and images into three.js

Recently, I've been experimenting with adding new images and text as textures to a 3D object using fabric js for my 3D configurator. My codebase is inspired by this GitHub repository, and I'm also utilizing this code from CodePen. One key aspect ...

What are the steps to implementing imgix-js via command line?

$(document).ready(function () { var imgixOptions = { updateOnResizeDown : true, updateOnPinchZoom : true, fitImgTagToContainerWidth: true, fitImgTagToContainerHeight: true, autoInsertCSSBestPractices: true, ...

I am interested in gradually displaying and then hiding a collection of keywords from an array in a single instance

Experimenting with creating titles that fade in and out on a landing page only once without repeating. I attempted to incorporate a counter variable to ensure the titles stop looping after displaying all items in an array. This method allows for easy add ...