I have a problem with my code, namely: If in input #search_code I introduce letter 'm' and in #insert_code input I introduce letter "M", function returns "is not ok". I tried to make uppercase inputs with CSS text-transform: uppercase; but it does not work. What can we do to make input fields case insensitive?

var search_code = document.getElementById('search_code');
var insert_code = document.getElementById('insert_code');
var result = document.getElementById('result');
var button = document.getElementById('button');
var audio = new Audio('sound.wav');


// respond to button click
button.onclick = function validate(e) {
  e.preventDefault();
  
  // show verification result:
  if (search_code.value == insert_code.value) {
    result.textContent = 'code ok';
    result.className = "ok";
    audio.play();
  } else {
    result.textContent = 'code is not ok';
    result.className = "not-ok";
  }
  // clear input when wrong:
  if (search_code.value !== insert_code.value) {
    insert_code.value = '';
  }
  return false;
};

function clearField(input) {
  input.value = "";
};

$(document).ready(function(){
      $('#search_code').bind("cut copy paste",function(e) {
          e.preventDefault();
      });
    });

...
     <form>
        <input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autoplete="off" value=""/><br/>
        <input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autoplete="off" value=""/><br/><br/>
        <input type="submit" id="button" name="button" value="verifica COD" />
    </form>

    </div>
  <div id="result"></div>
   </div>
   <script src="js/action_input.js"></script>
 </body>
</html>

I have a problem with my code, namely: If in input #search_code I introduce letter 'm' and in #insert_code input I introduce letter "M", function returns "is not ok". I tried to make uppercase inputs with CSS text-transform: uppercase; but it does not work. What can we do to make input fields case insensitive?

var search_code = document.getElementById('search_code');
var insert_code = document.getElementById('insert_code');
var result = document.getElementById('result');
var button = document.getElementById('button');
var audio = new Audio('sound.wav');


// respond to button click
button.onclick = function validate(e) {
  e.preventDefault();
  
  // show verification result:
  if (search_code.value == insert_code.value) {
    result.textContent = 'code ok';
    result.className = "ok";
    audio.play();
  } else {
    result.textContent = 'code is not ok';
    result.className = "not-ok";
  }
  // clear input when wrong:
  if (search_code.value !== insert_code.value) {
    insert_code.value = '';
  }
  return false;
};

function clearField(input) {
  input.value = "";
};

$(document).ready(function(){
      $('#search_code').bind("cut copy paste",function(e) {
          e.preventDefault();
      });
    });

...
     <form>
        <input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autoplete="off" value=""/><br/>
        <input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autoplete="off" value=""/><br/><br/>
        <input type="submit" id="button" name="button" value="verifica COD" />
    </form>

    </div>
  <div id="result"></div>
   </div>
   <script src="js/action_input.js"></script>
 </body>
</html>

• javascript
• case-sensitive

• 1 developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – Blazemonger Commented Feb 9, 2016 at 18:35

3 Answers 3

Convert those values to be pared to lowercase so that case sensitivity is no longer an issue.

var search_code = document.getElementById('search_code');
var insert_code = document.getElementById('insert_code');
var result = document.getElementById('result');
var button = document.getElementById('button');
var audio = new Audio('sound.wav');


// respond to button click
button.onclick = function validate(e) {
  e.preventDefault();

  // show verification result:
  if (search_code.value.toLowerCase() == insert_code.value.toLowerCase()) {
    result.textContent = 'code ok';
    result.className = "ok";
    audio.play();
  } else {
    result.textContent = 'code is not ok';
    result.className = "not-ok";
  }
  // clear input when wrong:
  if (search_code.value.toLowerCase() !== insert_code.value.toLowerCase()) {
    insert_code.value = '';
  }
  return false;
};

function clearField(input) {
  input.value = "";
};

$(document).ready(function() {
  $('#search_code').bind("cut copy paste", function(e) {
    e.preventDefault();
  });
});

<form>
  <input type="text" name="search_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='introdu codul'" id="search_code" placeholder="introdu codul" autoplete="off" value="" /><br/>
  <input type="" name="insert_code" onfocus="clearField(this, this.placeholder='');" onblur="this.placeholder='scaneaza codul'" id="insert_code" placeholder="scaneaza codul" autoplete="off" value="" /><br/><br/>
  <input type="submit" id="button" name="button" value="verifica COD" />
</form>

<div id="result"></div>

You should be checking the variables for quality by first converting them into either upper or lower case. You can use String's "toLowerCase()" before parisions.(If you need case insensitive parision)

search_code.value.toLowerCase() == insert_code.value.toLowerCase() 

Modify your condition check to as below

if (search_code.value.toLowerCase() == insert_code.value.toLowerCase()) {

That should make it run with no issues