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

Creating a Nested DataTable: A Step-by-Step Guide

Using AngularJS to manage cookies along with arrays

The transparency of an image is being lost when it is used in a modal

Issue with Clicking on Table Rows in JQuery (Specifically in Internet Explorer)

Potential Performance Issue with Material UI's withStyles Function

Display a pop-up window upon clicking anywhere on the webpage using jQuery and HTML

Using Django, CSS, and Javascript, create a dynamic HTML form that shows or hides a text field based on the selection

CodeIgniter: Bootstrap disables become enabled once validation is completed

Newbie React Developer Struggling to Implement Material-UI Example in React Project, State Functioning Differently from Hooks

How can you save the output of console.log in JavaScript to a variable and then use that variable in HTML?

What is the process for creating a linked TreeNode in the Ant tree design?

Cross-Origin Resource Sharing (CORS) verification for WebSocket connections

Hold off on refreshing the page until all the $.get calls have finished executing

What is the best way to display a variable from a function located outside of the public http folder in PHP?

AngularJS has the ability to handle the value of one input based on the value of another input

Choosing bookmarkable views in Angular 5 without using routes

Prevent the routing on page reload in AngularJS

Leveraging AngularJs by binding ng-model to data from a JSON

Using the same ng-model to show distinct values in two separate input fields

Issues arise when submitting the form on a web page with an MVC 4 partial view, causing the page