Existem 3 formas de resolver:
- Transferir informações máximas para o front-end
- Verificar quando o usuário enviar
- Verificação de dados assíncrona, como
Jquery
ajax
Transferir informações máximas para o front-end
Basta colocar suas informações máximas em alguma área oculta e usar o javascript para obter e verificar isso.
function check(obj){
var max = obj.getAttribute("data-max");
if(parseInt(obj.value) > parseInt(max)){
alert("Amount out of max!");
}
}
<input name="amount" value="0" data-max="3" onkeyup="check(this);"/>
Mas desta forma não é recomendado e deve ser evitado, pois os usuários podem obter seus dados de armazenamento verificando o código-fonte.
Verificar quando o usuário enviar
Verifique o valor com o valor máximo no lado do servidor, o que leva a uma experiência ruim do usuário.
Verificação de dados assíncrona
Isso é mais recomendado e usado, que obtém dados de forma assíncrona. Você pode tentar
jquery
. Supondo que sua linguagem do lado do servidor seja
php
, você pode criar um arquivo checkMax.php
:<?
$amount = $_POST["amount"];
$item_id = $_POST["item_id "];
/* get your max data from database using item_id, then assign $max
...
*/
echo $amount > $max ? 1 : 0
Então você pode verificar o valor pelo jquery ajax.
<input name="amount" class="amount" data-id="1" value="0"/>
$(".amount").change(function(){
var amount = $(this).val();
var item_id = $(this).attr("data-id");
$.post("checkMax.php", {"amount": amount, "item_id": item_id}, function(data){
if(data == "1")alert("Amount out of Max!");
});
});