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

Question

I am using javascript to display an error when user click on form submit button if the number entered is not in between min and max. The issue is when you click submit button the form will submit regardless. Can you please look at the code below and tell me what I need to add. I need to prevent form from submitting if the min and max condition is not fulfilled.

this is my PHP codes

 <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>

this is the 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>

Answer 1

You don't need to prevent form submission! You can specify the min and max attribute on <input type="number"> and it will prevent users from entering in anything outside those bounds!

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

But, if you really want to prevent form submission...

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

Answer 2

You are trying to prevent submission of form, for that you have to look into onSubmit event of form

Here we can add id to form

<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>

In js you can listen to submit event, do validation whatever you want

<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>

You can refer this for onSubmit event.

Answer 3

There are multiple ways you can solve this problem.

1. You can add a disabled attribute on the submit button. Remove this attribute until all the fields in the form are valid and your form submission is prevented. This might be a bit cumbersome because you'll need to watch for changes on all the form fields and then apply or remove the attribute.

2. Create a custom submit function using js and attach this as the onsubmit event handler. But you'll need an understanding of ajax calls. eg:

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>