javascript - If/Else 语句不在函数内部运行

Question

我正在尝试验证一些输入字段。更具体地说，该数字必须始终为正数。

编辑:JS代码

$(document).ready(function($) {
  $('.error-message').hide();
  function priceCheck() {
    $('input[class="price"]').each(function() {
      priceValue = $(this).val();
      console.log(priceValue); //only runs until here and seems it exists the function then

      if (priceValue <= 0) {
        evt.preventDefault();
        return false;
      } else {

      }
    });
  }

  //POST FORM
  $("#offerInquiry").on('valid.fndtn.abide', function(evt) {
    //prevent the default behaviour for the submit event
    // Serialize standard form fields:
    var formData = $(this).serializeArray();
    var checked = $("#terms").is(":checked");
    priceCheck();


    if (checked == false) {
      $('.error-message-container').empty();
      $('.error-message-container').append("<%= pdo.translate("
        checkBox.isObligatory ") %>");
      $('.error-message').show();
      $('.bid-error').css("display", "block");
      evt.preventDefault();
      return false;
    } else {
      loading();
      $.post("/inquiry.do?action=offer&ajax=1", formData,
        function(data) {
          window.top.location.href = data.redirectPage;
        });
    }

    return false;
  });
});

我编写了一个在表单提交时单独调用的函数。但它只会运行到控制台记录为止。为什么if else语句没有执行？

Answer 1

您正在使用evt.preventDefault()但您没有在 evt 中捕获该事件.

例如，您可以尝试这样做:添加 evt参数 priceCheck函数，然后传递evt当您调用该函数时，如下所示: priceCheck(evt)

但是，您不需要使用 preventDefault这里。您可以简单地从priceCheck返回一个 bool 值。并在您的 submit 中使用它处理程序。

您还遇到了一些字符串连接错误。 $('.error-message-container').append("<%= pdo.translate(" checkBox.isObligatory ") %>");缺少 +将这些字符串连接在一起。您可以在 JavaScript 调试器的“控制台”选项卡中查看类似的错误。 (更新这是 JSP 注入(inject)，但它可能无法按照您在此处尝试使用的方式工作。服务器函数 pdo.translate 只会在服务器端执行一次，并且无法通过客户端脚本...但它可以发出客户端脚本。先集中精力解决其他问题，然后再回到这个问题。)

最后，您读取了字符串值并将它们与数字进行比较。我用过parseFloat()将 input 中的这些值转换为字段转换为数字。

这是固定代码。

$(document).ready(function($) {
  $('.error-message').hide();

  function priceCheck() {
    var priceValid = true; // innocent until proven guilty
    $('input[class="price"]').each(function() {
      priceValue = parseFloat($(this).val()) || 0;
      if (priceValue <= 0) {
        priceValid = false;
        return false;
      }
    });
    return priceValid;
  }

  $("form").on("submit", function() {
    $("#offerInquiry").trigger('valid.fndtn.abide');
  });

  //POST FORM
  $("#offerInquiry").on('valid.fndtn.abide', function(evt) {
    //prevent the default behaviour for the submit event
    // Serialize standard form fields:
    var formData = $(this).serializeArray();
    var checked = $("#terms").is(":checked");
    var priceValid = priceCheck();
    if (priceValid) {
      $('.error-message').hide();
      if (checked == false) {
        $('.error-message-container').empty();
        $('.error-message-container').append("<%= pdo.translate(" + checkBox.isObligatory + ") %>");
        $('.error-message').show();
        $('.bid-error').css("display", "block");
        return false;
      } else {
        loading();
        $.post("/inquiry.do?action=offer&ajax=1", formData,
          function(data) {
            window.top.location.href = data.redirectPage;
          });
      }
    }
    else
      {
        $('.error-message').show().text("PRICE IS NOT VALID");
        }
    return false;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="offerInquiry">
  Price 1
  <input type="text" class="price" id="price1" value="0.00" />
  <br/>Price 2
  <input type="text" class="price" id="price1" value="0.00" />
  <br/>
  <input type='submit' />
  <div class="error-message">ERROR!</div>
</form>