How to prevent the number being less than or equal to 0 in an input type number?

Asked

Viewed 1,203 times

-1

Good night. I have an input type number (so when I list my shopping cart can change the quantity)

<td>
   <input 
       type="number" 
       style="width: 50px;"
       id="<?php echo "p" . $a; ?>"
       min="1"
       max="<?php echo $max_produto; ?>"
       value="<?php echo $values["item_quantity"]; ?>"
   >
</td>

My problem is that even setting the min and max, if I change directly in the input without using the arrows I can put the value 0, or less than 0, that when I confirm the purchase it gets the amount put and should not happen. How can I solve this problem?

php javascript jquery
  • 1

    Only using the required and min=1 here worked: http://jsbin.com/pocilifana. How you are submitting the form?

  • Do you intend to check only on client or server? The question is ambiguous.

  • @Mauroalexandre on client

  • @Andersoncarloswoss tried and it didn’t work :(

  • 1

    @Tiagosimoes I believe that Valdeir’s response is the solution, if that’s the case, you’d better confirm, rather than continue with the comments.

  • @Mauroalexandre already tested and did not work, and I do not know why my comment on the solution of the colleague was not sent :S

  • <input type="number" ..... oninput="if(this.value == 0) this.value = ''" />

  • <input type="number" ...... oninput="this.value = Math.abs(this.value)"/>

Show 3 more comments

2 answers

2

There are several ways, one of them is to check the property validity.valid. It will be true if and only if the input is within range.

<input 
       type="number" 
       style="width: 50px;"
       id="qqid"
       min="1"
       max="11"
       value="" oninput="validity.valid||(value='');" />

The only problem with the above solution is that it completely wipes the previously entered value when an invalid value is inserted.

This can be avoided as follows:

<input 
       type="number" 
       style="width: 50px;"
       id="qqid"
       min="1"
       max="11"
       value="" oninput="validity.valid ? this.save = value : value = this.save;" />

1

Just use the event input through the Javascript.

Follows code and explanation:

/* O evento input do DOM é disparado sincronicamente quando o valor de um elemento <input>, <select>, ou <textarea> é alterado. */
document.querySelector("#qualquer-coisa").addEventListener("input", el => {
	
  /* Verifica se o valor alterado é maior que o valor do atributo max */
	if (el.target.value > parseInt(el.target.getAttribute("max"))) {
  
  	/* Caso seja, define o valor do atributo max */
  	el.target.value = el.target.getAttribute("max");
  }
  
  /* Verifica se o valor alterado é menor que 0 */
	if (el.target.value <= parseInt(el.target.getAttribute("min"))) {
  
  	/* Caso seja, define o valor 0 */
  	el.target.value = 1;
  }
})
<input 
       type="number" 
       style="width: 50px;"
       id="qualquer-coisa"
       min="1"
       max="11"
       value="8" />

Obs: Beyond the event input, you can choose to: paste or change

  • You are not avoiding 0 (zero). The question is: How to PREVENT the number from being less than or EQUAL to 0 in an input type number? Correct answer would be with el.target.value = "";

Browser other questions tagged php javascript jquery

You are not signed in. Login or sign up in order to post.