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

Is there a way to bring in a variable from the front end script?

There seems to be a glitch in the functionality of annotations when using annotator.js

Dynamic divs to occupy the rest of the available vertical area

Accessing a variable outside of the component constructor will result in the variable being

Discover the steps for integrating an object into a Ext.grid.Panel using Sencha Ext Js

AngularJS Get request unable to fetch image URL due to receiving a "302 found" error

Using jQuery to create a flawless animation

Tips for correcting boolean checks and verification for undefined variables

Enhancing leaflet popup functionality by incorporating ng-click into the onEachFeature function

How to dynamically disable options in a Vuetify v-select based on the type of object value

Having Trouble Operating Virtual Tour in Flash

What is the process for designing custom width columns using Bootstrap?

Using Ajax for updating table content on a JSP webpage section

How can you effectively utilize Selenium to web scrape a webpage featuring collapsible fields?

The authentication for npm failed with a 401 error code when attempting to log in

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Is it possible to obscure the PHP file path and conceal the parameters in a POST request?

The error message "Uncaught ReferenceError: require is not defined" is commonly encountered when using Webpack

What are some methods for utilizing the data received through this.props.history?

Guidelines for managing UnprocessedItems with the AWS JavaScript SDK for dynamoDB