使用AJAX提交表单时在Firefox中处理无效字段

时间:2019-02-28 09:25:07

标签: javascript jquery html ajax

我有一个带有<input type=number>字段的表单。 表单不是通过<button type=submit>提交的,但是输入字段值是使用Javascript函数收集的,并传递给AJAX调用。在传统的提交中,当输入字段之一无效时,Firefox将阻止我提交表单。但是在这种情况下,它不会发生。相反,Firefox将无效字段值设置为空。由于我的参数不是必需的,因此我无法在服务器端区分它是无效的还是被故意遗漏了。我的程序工作的小幅草图:

<html><head><meta charset="utf-8">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function() {
  $("#button").click(
    function() {
      let data = {somefield: $("#field").val()};
      console.log("data to transfer:", data);
      $.ajax({
        type: "POST",
        dataType: "json",
        url: "http://httpbin.org/post",
        data: data,
        success: function(e) {
          console.log("server response:", e.form);
        }
      });
    }
  );
});
</script></head><body><form>
<input id="field" type="number" />
<button type="button" id="button">Submit</button>
</form></body></html>

Chrome可以更好地处理这种情况-不允许我在数字字段中输入非数字字符。尝试使用jQuery模仿这种行为会带来其他问题,这可能值得另一个问题。

在Firefox中处理此问题的最佳方法是什么?

0 个答案:

没有答案