Question

阻止表单提交

我正在尝试阻止表单提交并显示警告DIV，直到他们修复了错误的值。当卖家尝试以低于成本价格的价格出售产品时，会显示错误

这就是我所拥有的

<div class="warnings">error in price</div>

这是我在销售价格低于成本价格时显示的div，因此我们必须阻止他们销售产品

function hide(obj) {
    var el = document.getElementById(obj);
    el.style.display = 'none';
}

$(document).ready(function() {
    $('form#selling').submit(function(e) {
            $("#sale_price").mouseout(function() {
                if (Number($("#sale_price").val()) <
                    Number($("#cost_price").val())) {
                    $("#warnings").show();
                }
            });
        } else {
            form.submit();
        }
    });
});

我没有显示错误DIV并且表单被提交...

FORM具有正确的名称和ID“sell”

表单中的输入是

<input type="hidden" name="sale_price" id="sale_price">
<input type="hidden" name="cost_price" id="cost_price">

Answer 1

我建议在提交内容时回复false 否则，即使显示错误，表单仍会在之后立即提交。

我还纠正了其他一些错误，包括删除mouseout，确保所有大括号都关闭，并使用ID作为错误容器而不是类。

$(function() {

  var $cost_price = $('#cost_price');
  var $sale_price = $('#sale_price');
  var $warnings = $('#warnings');
  var $form=$('#selling');

  $form.submit(function(e) {
    if (Number($sale_price.val()) < Number($cost_price.val())) {
      $warnings.fadeIn(150);
      return false;
    }
  });

  $form.on('click', function() {
    $warnings.fadeOut(150);
  });

});

#warnings {
  display: none;
  margin: 1em 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="selling" action="" method="post">
  <input type="text" id="sale_price" value="300">
  <input type="text" id="cost_price" value="500">
  <input type="submit">
</form>

<div id="warnings">error en precio de venta</div>

Answer 2

这是我的例子。我使用javacript来验证输入是否小于另一个值，并使用jquery将该值发送到另一个文件（例如submit.php）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
Price: <input id="myText" type="text" name="price">
<button onclick="myFunction()">Click me</button>
</body>
<script>
    function myFunction() {
        try{
            var givenValue = parseInt(document.getElementById("myText").value);
            if(givenValue < 10){ //10 is an example selling price
                $.ajax({
                    type: "POST",
                    url: "submit.php",
                    data: {price: givenValue},
                    complete: function(data) {
                        alert(data);
                    }
                });
            }
        } catch(Exception){

        }
    }
</script>
</html>

让我知道你的想法！

Answer 3

这应该做你想要的，但由于我们没有看到实际的形式，这是一个猜测。

$(document).ready(function() {
    $('form#selling').submit(function(e) {
        e.preventDefault(); // prevent the form of beeing submitted

        if (Number($("#sale_price").val()) < Number($("#cost_price").val()) {
            $("#warnings").show();
        } else {
            $('form#selling').submit();
        }
      });
});

编辑：现在我们有了表格。这应该仍然有效，但showdev的答案更优雅......

防止形成错误数据并显示错误div

3 个答案: