Altering the color of a div based on a specified value condition

Question

Altering the color of a div based on a specified value condition

I am in need of assistance with a div structure similar to this:

<div id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable ></div>
<div id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></div>    
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button>

My issue revolves around validating the div elements. For example: If the namecoc div does not have a value, I want it to change color to red. Once a value is inputted, the color should return to its normal state (black) when the user selects another div or presses a button.

NOTE: I opted for a div instead of an input form because Bootstrap was not changing the text background color on active states. Therefore, I decided to use a div element. Please excuse any language errors as English is not my primary language.

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

My recommendation is to stick with using input only, as content editable can present compatibility issues across various browsers.

Here's a suggested approach.

$("#btncontinue").click(function() {
  $("input").each(function() {
    $.trim($(this).val()) == "" ?
      $(this).addClass("invalid") : $(this).removeClass("invalid");
  });
});

$("input").on("blur", function() {
  $.trim($(this).val()) == "" ?
    $(this).addClass("invalid") : $(this).removeClass("invalid");
});

.invalid {
  border: red 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable></input>
<input id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></input>
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button>

Answer 2

My recommendation is to stick with using input only, as content editable can present compatibility issues across various browsers.

Here's a suggested approach.

$("#btncontinue").click(function() {
  $("input").each(function() {
    $.trim($(this).val()) == "" ?
      $(this).addClass("invalid") : $(this).removeClass("invalid");
  });
});

$("input").on("blur", function() {
  $.trim($(this).val()) == "" ?
    $(this).addClass("invalid") : $(this).removeClass("invalid");
});

.invalid {
  border: red 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="namacoc" tabindex="1" class="filled-text" placeholder="Input your name" contenteditable></input>
<input id="position" tabindex="1" class="filled-text" placeholder="Input your position" contenteditable></input>
<button type="button" id="btncontinue" class="btn btn-wide btn-blue">Continue</button>

Answer 3

Answer №2

Array.prototype.forEach.call(document.querySelectorAll(".filled-text"), function (node) {
  node.onfocus = function () {
    this.className += " active";

    var text = this.innerHTML;

    if ((this.id === "namacoc"  && text === "Enter your name") ||
        (this.id === "position" && text === "Enter your position")) {

      this.innerHTML = "";
    }
  };

  node.onblur = function () {
    this.className = this.className.replace(" active", "");

    if (this.innerHTML === "") {
      if (this.id === "namacoc") {
        this.innerHTML = "Enter your name";
      } else {
        this.innerHTML = "Enter your position";
      }

      this.className = this.className.replace(" normal", "") + " empty";
    } else {
      this.className = this.className.replace(" empty", "") + " normal";
    }
  };
});

.filled-text {
  width: 200px;
  padding: 8px;
  margin: 24px 0;
  border: 1px solid #000;
}

.filled-text.placeholder {
  color: #d0d0d0;
}

.filled-text.empty {
  color: red;
}

.filled-text.active,
.filled-text.normal {
  color: #000;
}

<div id="namacoc"  class="filled-text placeholder" contenteditable>Enter your name</div>
<div id="position" class="filled-text placeholder" contenteditable>Enter your position</div>

Answer 4

Array.prototype.forEach.call(document.querySelectorAll(".filled-text"), function (node) {
  node.onfocus = function () {
    this.className += " active";

    var text = this.innerHTML;

    if ((this.id === "namacoc"  && text === "Enter your name") ||
        (this.id === "position" && text === "Enter your position")) {

      this.innerHTML = "";
    }
  };

  node.onblur = function () {
    this.className = this.className.replace(" active", "");

    if (this.innerHTML === "") {
      if (this.id === "namacoc") {
        this.innerHTML = "Enter your name";
      } else {
        this.innerHTML = "Enter your position";
      }

      this.className = this.className.replace(" normal", "") + " empty";
    } else {
      this.className = this.className.replace(" empty", "") + " normal";
    }
  };
});

.filled-text {
  width: 200px;
  padding: 8px;
  margin: 24px 0;
  border: 1px solid #000;
}

.filled-text.placeholder {
  color: #d0d0d0;
}

.filled-text.empty {
  color: red;
}

.filled-text.active,
.filled-text.normal {
  color: #000;
}

<div id="namacoc"  class="filled-text placeholder" contenteditable>Enter your name</div>
<div id="position" class="filled-text placeholder" contenteditable>Enter your position</div>

Altering the color of a div based on a specified value condition

Answer №1

Answer №2

Similar questions

While attempting to import modules in Visual Studio Code, an error message appears stating "Unexpected token {"

Show and hide menu items without automatically scrolling the user back to the top of the page

Slide up using jQuery to the left direction

Div with sidebar that sticks

The resource being requested is missing the 'Access-Control-Allow-Origin' header - Issue with Pinterest OAuth implementation

This is my first experience with Flask and I am encountering an issue with the POST method

Establishing a proxy server to support the development of a Create React application

Ways to widen the header to fit the entire page?

Tips for guaranteeing blocking within a loop in Node.JS

Challenge encountered while processing JSON data

The Jquery AjaxStop event fails to trigger, but AjaxStart works perfectly

Challenges encountered in converting JSON objects into an HTML table

Comparing Flash and jQuery for RIAs development: Which tool reigns supreme and why?

What is the process for choosing an element that is embedded within another element?

Implementing event handlers for Revolution Slider through a loop

Showing pictures from a database utilizing PHP and HTML

What is the best way to ensure a div is always scrollable?

What is the best way to fetch a UniqueID using document.getElementById()?

Pass a variable value as a parameter to a jQuery function using code-behind

Implementing Keycloak Policies to Secure a Node.js API