Ensuring numbers only with Svelte input validation, letters slip through my prevention efforts

Question

Ensuring numbers only with Svelte input validation, letters slip through my prevention efforts

I'm stumped on what is causing this issue. The input field is still displaying letters when it shouldn't be.

<script>
    let value = "";
    
    function isNumber(value) {
        return !isNaN(value);
    }

    function handleInput(e) {
        let oldValue = value;
        let newValue = e.target.value;

        console.log(oldValue, newValue, "isNumber", isNumber(newValue));

        if (isNumber(newValue) && newValue.length < 17) {
            value = newValue;
        } else {
            value = oldValue;
        }
    }
</script>

<div class="container">
    <input
        {value}
        on:input|preventDefault={handleInput}
    />
</div>

Check out the REPL link for more details.

javascript svelte

Answer 1

Answer №1

REPL

If you need to notify the user about input validation... use the code snippet below

<script>
  let value = ""


  // Check if user input is number  
  const onKeyPress = e => {
    if (!isFinite(e.key)) {
      alert('Not A number')
    }
  };

  $: value = value.replace(/[^0-9]/g, '')
</script>
<input bind:value on:keypress={onKeyPress} />

For input validation without displaying a warning to the user... use the following code

<script>
  let value = "";

  $: value = value.replace(/[^0-9]/g, '')
</script>
<input bind:value />

Answer 2

REPL

If you need to notify the user about input validation... use the code snippet below

<script>
  let value = ""


  // Check if user input is number  
  const onKeyPress = e => {
    if (!isFinite(e.key)) {
      alert('Not A number')
    }
  };

  $: value = value.replace(/[^0-9]/g, '')
</script>
<input bind:value on:keypress={onKeyPress} />

For input validation without displaying a warning to the user... use the following code

<script>
  let value = "";

  $: value = value.replace(/[^0-9]/g, '')
</script>
<input bind:value />

Answer 3

Answer №2

One simple solution is:

else {
    e.target.value = oldValue;
}

Answer 4

One simple solution is:

else {
    e.target.value = oldValue;
}

Answer 5

Answer №3

After gathering inspiration from various sources, I found a solution that worked for me.

This approach involves:

Converting the input value to a number
Filtering out any characters that would prevent the value from being a number
Adding an additional pattern attribute to assist with form submission

export let value: number;

function updateValue(e: Event): void {
  const target = e.target as HTMLInputElement;
  const newValue = Number(target.value);

  if (!isNaN(newValue)) {
    value = newValue;
  } else {
    // revert to previous value
    target.value = value.toString();
  }
}

<input
  type="text"
  inputmode="numeric"
  pattern="[0-9.]*"
  {value}
  on:input|preventDefault={updateValue}
/>

Answer 6

After gathering inspiration from various sources, I found a solution that worked for me.

This approach involves:

Converting the input value to a number
Filtering out any characters that would prevent the value from being a number
Adding an additional pattern attribute to assist with form submission

export let value: number;

function updateValue(e: Event): void {
  const target = e.target as HTMLInputElement;
  const newValue = Number(target.value);

  if (!isNaN(newValue)) {
    value = newValue;
  } else {
    // revert to previous value
    target.value = value.toString();
  }
}

<input
  type="text"
  inputmode="numeric"
  pattern="[0-9.]*"
  {value}
  on:input|preventDefault={updateValue}
/>

Answer 7

Answer №4

Change the input field to a numeric type for better user experience.

<input
    type='number'
    bind:value
    on:input|preventDefault={handleInput}
/>

Try out this REPL link

Answer 8

Change the input field to a numeric type for better user experience.

<input
    type='number'
    bind:value
    on:input|preventDefault={handleInput}
/>

Try out this REPL link

Ensuring numbers only with Svelte input validation, letters slip through my prevention efforts

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible for Nextjs routing catchAll to coexist with a slug folder within a route?

What is the best way to implement React.memo or useMemo and ensure semantic guarantees?

Uploading files in AngularJS using Rails Paperclip

Converting large JSON data (approximately 100MB) into an Excel file using JavaScript

How to Use Jquery to Calculate the Total Number of HTML Elements Generated Dynam

Typescript generates a warning when utilizing JSON objects in conjunction with data types

The download window is malfunctioning and unable to save the file

Encountering a mysterious error while attempting to access and modify a value stored in a useState hook using the keydown

The challenge of vertically aligning text in a dynamically generated div

Discovering the quantity of arguments passed into a constructor in Node.js

Attempted to load Angular multiple times

Error message encountered when attempting to rotate an object in three.js: "Object is undefined"

(Build an Angular, TypeScript Application) Develop a new function using a string that includes an if statement without using the eval function

What is the best way to monitor different selections to keep track of their state?

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

JavaScript: comparison between browser and native support for setTimeout and setInterval

Sending a PHP error back in response to an Ajax call

How come React.js is not displaying images from local URLs?

Utilizing HTML/CSS with React/Bootstrap: A Comprehensive Guide

Ways to simulate a constant that acts as a dependency for the service being examined?