我有一个带有<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中处理此问题的最佳方法是什么?