如果未满足最小和最大条件，则阻止表单提交

如何解决如果未满足最小和最大条件，则阻止表单提交

如果输入的数字不在最小值和最大值之间，我将在用户单击表单提交按钮时使用 javascript 显示错误。问题是当您单击提交按钮时，表单将无论如何提交。你能看看下面的代码并告诉我我需要添加什么吗？如果不满足最小和最大条件，我需要阻止表单提交。

这是我的 PHP 代码

 <div class="clearfix"></div>
<form action="store_items.PHP" method="post" name="cartform">
<div class="col-12 form-group">
  <div class="row">
    <div class="col-3">
      <input type="hidden" name="cart_name" value="<?PHP echo $row['product_title']; ?>">
      <input type="hidden" name="cart_image" value="<?PHP echo $row['product_photo']; ?>">
      <input id="quantity"type="number" name="cart_qty" step="1" class="form-control text-center" onchange="restrictValue(this,<?PHP echo $min; ?>,<?PHP echo $max; ?>)">
      <small class="float-right"><?PHP echo $row['product_unit']; ?></small>
      <input type="hidden" name="cart_unit" value="<?PHP echo $row['product_unit']; ?>">
      <input type="hidden" name="cart_price" value="<?PHP echo $row['product_price']; ?>">
      <input type="hidden" name="product_id" value="<?PHP echo $row['id']; ?>">
      <input type="hidden" name="seller_id" value="<?PHP echo $row['seller_id']; ?>">
    </div>

    <div class="col-9">
      <input id="addtocart" class="btn btn-block addtocart" type="submit" value="Add to cart" name="addtocart" <?PHP if($row['product_status'] == 0) echo 'disabled="disabled"'; ?>  >
    </div>
  </div>
</div>
</form>

这是javascript

<script type="text/javascript">
  
  function restrictValue(inputElement,minimum,maximum)
{
    let value = inputElement.value;
    if (value < minimum) {
      value = minimum;
      alert('Your order has not reach the minimum order quantity');
      return false;
    }
    if (value > maximum) {
      value = maximum;
      alert('Your order has exceed the avaliable stock');
      return false;
    }
    inputElement.value = value;
}

</script>

解决方法

您不需要阻止表单提交！您可以在 /var/www/html 上指定 localhost/welcome.php 和 min 属性，这将阻止用户输入超出这些范围的任何内容！

max

但是，如果您真的想阻止表单提交...

<input type="number">

您正试图阻止提交表单，为此您必须查看表单的 onSubmit 事件

这里我们可以给表单添加id

<div class="clearfix"></div>
<form action="store_items.php" method="post" name="cartform" id="cartfrom">
<div class="col-12 form-group">
  <div class="row">
    <div class="col-3">
      <input type="hidden" name="cart_name" value="<?php echo $row['product_title']; ?>">
      <input type="hidden" name="cart_image" value="<?php echo $row['product_photo']; ?>">
      <input id="quantity"type="number" name="cart_qty" step="1" class="form-control text-center" onchange="restrictValue(this,<?php echo $min; ?>,<?php echo $max; ?>)">
      <small class="float-right"><?php echo $row['product_unit']; ?></small>
      <input type="hidden" name="cart_unit" value="<?php echo $row['product_unit']; ?>">
      <input type="hidden" name="cart_price" value="<?php echo $row['product_price']; ?>">
      <input type="hidden" name="product_id" value="<?php echo $row['id']; ?>">
      <input type="hidden" name="seller_id" value="<?php echo $row['seller_id']; ?>">
    </div>

    <div class="col-9">
      <input id="addtocart" class="btn btn-block addtocart" type="submit" value="Add to cart" name="addtocart" <?php if($row['product_status'] == 0) echo 'disabled="disabled"'; ?>  >
    </div>
  </div>
</div>
</form>

在js中你可以监听submit事件，做任何你想做的验证

<script type="text/javascript">
  
  function restrictValue(inputElement,minimum,maximum)
{
    let value = inputElement.value;
    if (value < minimum) {
      value = minimum;
      alert('Your order has not reach the minimum order quantity');
      return false;
    }
    if (value > maximum) {
      value = maximum;
      alert('Your order has exceed the avaliable stock');
      return false;
    }
    inputElement.value = value;
}

function logSubmit(event) {
  if(!restrictValue(inputElement,maximum)) {
    event.preventDefault();
  }
}


const form = document.getElementById('form');
form.addEventListener('submit',submit);
</script>

您可以参考 this 的 onSubmit 事件。

有多种方法可以解决此问题。

您可以在提交按钮上添加 disabled 属性。删除此属性，直到表单中的所有字段都有效并且您的表单提交被阻止。这可能有点麻烦，因为您需要注意所有表单字段的更改，然后应用或删除属性。
使用 js 创建自定义提交函数并将其附加为 onsubmit 事件处理程序。但是您需要了解 ajax 调用。例如：

function handleSubmit(evt) {
 evt.preventDefault(); // this will prevent the form from submitting
 if(allFormFieldsAreValid) {
   await fetch('/post-url',// the route you want to post data to 
   {
    method: 'POST',body: JSON.stringify(data) // the form data
  }).then(function (data){
   location.replace('/some-url'); // you can redirect to your disered route
  });
 }
}

<form onsubmit="handleSubmit">
  ...
</form>