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

Posted 2023-03-17

【中文标题】如果不满足最小和最大条件，则阻止表单提交

【英文标题】：prevent form form submitting when if min and max condition is not fullfilled

【发布时间】：2021-06-06 00:20:27

【问题描述】：

如果输入的数字不在最小值和最大值之间，我正在使用 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>

【参考方案1】：

您无需阻止表单提交！您可以在<input type="number"> 上指定min 和max 属性，它会阻止用户进入这些范围之外的任何内容！

<input id="quantity"type="number" name="cart_qty" step="1" class="form-control text-center" min="<?php echo $min; ?>" max="<?php echo $max; ?>">

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

<form onsubmit="doValidate">
   ...
</form>
<script>
function doValidate(event) 
   event.preventDefault();
   // validate your inputs
;
</script>

【参考方案2】：

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

这里我们可以给form添加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中你可以监听提交事件，做任何你想做的验证

<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,minimum,maximum)) 
    event.preventDefault();
  



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

您可以参考this onSubmit 事件。

【参考方案3】：

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

您可以在提交按钮上添加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>