Ensuring the validity of input tags

Question

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic:

https://codepen.io/ion-ciorba/pen/MWVWpmR

In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component leaves much to be desired. As it currently stands, users are unable to enter values below 400, which can be frustrating. I am looking for a way to improve the interaction without restricting the user from typing. Are there alternative methods besides just using 'change' and 'input' events? How can I enhance this interaction to be more user-friendly while still respecting the minimum value of 400?

Perhaps a better approach would be:

if (numberInputValue == "" || parseInt(numberInputValue) < parseInt(min)) {
numberInputValue = min;
} else if (parseInt(numberInputValue) > parseInt(max)) {
numberInputValue = max;
}

javascript html jquery css

Answer 1

Answer №1

I am in agreement with @Twisty that the jQuery UI Slider would be a more suitable choice

$(function() {
  let slider = $(".tbi-slider")[0];
  let loanAmount = $(".tbi-calc-loanAmount");
  let totalLoanAmount = $(".tbi-calc-loanTotalAmount");
  var min = $(".tbi-slider").attr("min");
  var max = $(".tbi-slider").attr("max");
  $("#co-tbi-loanAmount-input").change(function(s) {
    var numberInputValue = s.target.value;
    if (numberInputValue.match(/^[0-9]+$/) == null) {
      $("#co-tbi-loanAmount-input").val(min);
    }
    slider.value = parseInt(numberInputValue);
    if (parseInt(numberInputValue) < parseInt(min)) {
      $("#co-tbi-loanAmount-input").val(min);
    } else if (parseInt(numberInputValue) > parseInt(max)) {
      $("#co-tbi-loanAmount-input").val(max);
    }
    if (
      parseInt(numberInputValue) >= parseInt(min) &&
      parseInt(numberInputValue) <= parseInt(max)
    ) {
      $("#co-tbi-loanAmount-input").val(numberInputValue);
    }
    $("#tbi-range-slider").slider("value", $(this).val());
  });

  $("#tbi-range-slider").slider({
    min: 400,
    max: 1000,
    orientation: "horizontal",
    range: "min",

    slide: function(event, ui) {
      refreshSwatch(),
        $("#co-tbi-loanAmount-input").val(ui.value);
    },

  });
});

function refreshSwatch() {
  $("#tbi-range-slider").css("background-color", "#729fcf");
}

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

#tbi-range-slider {
  display: inline-block;
  width: 300px;
  margin: 15px;
  background-image: none;
}

#tbi-range-slider .ui-slider-range {
  background: #ef2929;
}

<input id="co-tbi-loanAmount-input" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="400">


<div class="tbi-slider" id="tbi-range-slider" min="400" max="1000" value="500"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

I trust this information is helpful

Answer 2

I am in agreement with @Twisty that the jQuery UI Slider would be a more suitable choice

$(function() {
  let slider = $(".tbi-slider")[0];
  let loanAmount = $(".tbi-calc-loanAmount");
  let totalLoanAmount = $(".tbi-calc-loanTotalAmount");
  var min = $(".tbi-slider").attr("min");
  var max = $(".tbi-slider").attr("max");
  $("#co-tbi-loanAmount-input").change(function(s) {
    var numberInputValue = s.target.value;
    if (numberInputValue.match(/^[0-9]+$/) == null) {
      $("#co-tbi-loanAmount-input").val(min);
    }
    slider.value = parseInt(numberInputValue);
    if (parseInt(numberInputValue) < parseInt(min)) {
      $("#co-tbi-loanAmount-input").val(min);
    } else if (parseInt(numberInputValue) > parseInt(max)) {
      $("#co-tbi-loanAmount-input").val(max);
    }
    if (
      parseInt(numberInputValue) >= parseInt(min) &&
      parseInt(numberInputValue) <= parseInt(max)
    ) {
      $("#co-tbi-loanAmount-input").val(numberInputValue);
    }
    $("#tbi-range-slider").slider("value", $(this).val());
  });

  $("#tbi-range-slider").slider({
    min: 400,
    max: 1000,
    orientation: "horizontal",
    range: "min",

    slide: function(event, ui) {
      refreshSwatch(),
        $("#co-tbi-loanAmount-input").val(ui.value);
    },

  });
});

function refreshSwatch() {
  $("#tbi-range-slider").css("background-color", "#729fcf");
}

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

#tbi-range-slider {
  display: inline-block;
  width: 300px;
  margin: 15px;
  background-image: none;
}

#tbi-range-slider .ui-slider-range {
  background: #ef2929;
}

<input id="co-tbi-loanAmount-input" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="400">


<div class="tbi-slider" id="tbi-range-slider" min="400" max="1000" value="500"></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">

I trust this information is helpful

Answer 3

Answer №2

Consider the following.

$(function() {
  function checkValue(input) {
    // sanitize for Numbers Only
    if (isNaN($(input).val())) {
      return false;
    }
    // cast to Integers
    var val = parseInt($(input).val());
    var min = parseInt($(input).data("min"));
    var max = parseInt($(input).data("max"));
    console.log(val, min, max, (val >= min) && (val <= max))
    // return val is in between Min & Max
    return (val >= min) && (val <= max);
  }

  // Initialize Min & Max on Text Input as Data Attributes
  $("#co-tbi-loanAmount-input").data({
    min: $("#tbi-range-slider").attr("min"),
    max: $("#tbi-range-slider").attr("max")
  });

  $('#co-tbi-loanAmount-input').change(function(s) {
    // ignore 1, and 10, will start to look at 100
    if ($(this).val().length >= 3) {
      if (!checkValue(this)) {
        console.log("Incorrect Value: " + $(this).val());
        $(this).val("");
      } else {
        var numberInputValue = Math.floor(parseInt($(this).val()) / 100) * 100;
        $(this).val(numberInputValue);
        var start = parseInt($("#tbi-range-slider").val()) - parseInt($("#tbi-range-slider").attr("min"));
        var diff = parseInt($("#tbi-range-slider").attr("max")) - parseInt($("#tbi-range-slider").attr("min"));
        console.log("linear-gradient(to right, #FF6600 0%, #FF6600 " + Math.round(start / diff * 100) + "%, #DEE2E6 " + Math.round(start / diff * 100) + "%, #DEE2E6 100%)");
        $("#tbi-range-slider").val(numberInputValue).parent().css("background", "linear-gradient(to right, #FF6600 0%, #FF6600 " + Math.round(start / diff * 100) + "%, #DEE2E6 " + Math.round(start / diff * 100) + "%, #DEE2E6 100%)");
      }
    }
  });

  $("#tbi-range-slider").change(function() {
    $('#co-tbi-loanAmount-input').val($(this).val()).trigger("change");
  })
});

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="co-tbi-loanAmount-input" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="25000">
<div>
  <input type="range" min="400" max="50000" value="25000" step="100" class="tbi-slider" id="tbi-range-slider">
</div>

This feature allows users to input a number (e.g., 200, 400, 420, 10000) and adjust the slider accordingly if it falls within the range set by min and max.

If a user inputs the value of 200, it will be cleared. If they enter a non-numeric character like 'A', the value will also be removed.

If the user enters 420, it will be rounded down to 400.

Answer 4

Consider the following.

$(function() {
  function checkValue(input) {
    // sanitize for Numbers Only
    if (isNaN($(input).val())) {
      return false;
    }
    // cast to Integers
    var val = parseInt($(input).val());
    var min = parseInt($(input).data("min"));
    var max = parseInt($(input).data("max"));
    console.log(val, min, max, (val >= min) && (val <= max))
    // return val is in between Min & Max
    return (val >= min) && (val <= max);
  }

  // Initialize Min & Max on Text Input as Data Attributes
  $("#co-tbi-loanAmount-input").data({
    min: $("#tbi-range-slider").attr("min"),
    max: $("#tbi-range-slider").attr("max")
  });

  $('#co-tbi-loanAmount-input').change(function(s) {
    // ignore 1, and 10, will start to look at 100
    if ($(this).val().length >= 3) {
      if (!checkValue(this)) {
        console.log("Incorrect Value: " + $(this).val());
        $(this).val("");
      } else {
        var numberInputValue = Math.floor(parseInt($(this).val()) / 100) * 100;
        $(this).val(numberInputValue);
        var start = parseInt($("#tbi-range-slider").val()) - parseInt($("#tbi-range-slider").attr("min"));
        var diff = parseInt($("#tbi-range-slider").attr("max")) - parseInt($("#tbi-range-slider").attr("min"));
        console.log("linear-gradient(to right, #FF6600 0%, #FF6600 " + Math.round(start / diff * 100) + "%, #DEE2E6 " + Math.round(start / diff * 100) + "%, #DEE2E6 100%)");
        $("#tbi-range-slider").val(numberInputValue).parent().css("background", "linear-gradient(to right, #FF6600 0%, #FF6600 " + Math.round(start / diff * 100) + "%, #DEE2E6 " + Math.round(start / diff * 100) + "%, #DEE2E6 100%)");
      }
    }
  });

  $("#tbi-range-slider").change(function() {
    $('#co-tbi-loanAmount-input').val($(this).val()).trigger("change");
  })
});

body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="co-tbi-loanAmount-input" class="tbi-calc-loanAmount co-tbi-input tbi-font-18" value="25000">
<div>
  <input type="range" min="400" max="50000" value="25000" step="100" class="tbi-slider" id="tbi-range-slider">
</div>

This feature allows users to input a number (e.g., 200, 400, 420, 10000) and adjust the slider accordingly if it falls within the range set by min and max.

If a user inputs the value of 200, it will be cleared. If they enter a non-numeric character like 'A', the value will also be removed.

If the user enters 420, it will be rounded down to 400.

Ensuring the validity of input tags

Answer №1

Answer №2

Similar questions

My goal is to display the products on the dashboard that have a quantity lower than 10. This information is linked to Firestore. What steps can I take to enhance this functionality?

How can I prevent the interpolation of "${variable}" in HTML when using AngularJS?

php Use cURL and the DOM to extract content with specified CSS styling

Tips on hovering over information retrieved from JSON data

Filter the array and determine the number of elements in the filtered array

Show the nested div when hovering over the containing div using JavaScript

Bug in timezone calculation on Internet Explorer 11

The link function fails to execute

Determine the selected radio button

Executing a function in jQuery by including a variable

Ways to retrieve Payload following the Request url access

Phonegap experiencing issues with executing JavaScript code

Top method for implementing select all checkboxes in a table

Which specific element should the userEvent.type(...) function target in order to work effectively with MUI's DesktopDatePicker TextField component?

Whoops! Unable to interpret properties from an undefined source while trying to retrieve 'get'

ConnectionError: 404 Page Not Located

Determine the exposed area of an element with overflowing content

Learn how to dynamically apply a CSS attribute for a set period of time using jQuery and automatically revert it back to its original state after 2 seconds

What is the best way to locate an element with the class name being an email address using jQuery?

A step-by-step guide on creating a unique ticket number sequence in PHP