javascript - 使用 parseFloat 时出错 "An invalid form control with name=' field_name' 不可聚焦。”

Question

嗨，我在 html 中有两个文本框 type=number

<input data-sign="BHD " type="number" class="widthinput input__field input__field--yoshiko validation-passed" value="" name="special_price" id="special_price">
<input data-sign="BHD " value="" type="number" class="required-entry validate-zero-or-greater input__field input__field--yoshiko validation-passed" name="price" id="price">

这是我用于检查的 js 代码

if(parseFloat(jQuery('#special_price').val()) >= parseFloat(jQuery('#price').val())){
    console.log(parseFloat(jQuery('#special_price').val()));
    console.log(parseFloat(jQuery('#price').val()));
    alert("You can't enter special price greater than price");
    jQuery("html, body").animate({ scrollTop: 0 }, "slow");
    e.preventDefault();
    return false;
}

当我输入诸如

之类的值时

price : 160 , special_price : 90

这个 js 条件工作正常，但是当我输入像

这样的值时

price 250.750, special price 55.350

这种情况失败并在控制台中给出错误

An invalid form control with name='price' is not focusable.
An invalid form control with name='special_price' is not focusable.

我使用的是 Chrome 浏览器。

Answer 1

您的代码正在运行，请检查您的 jquery 库。请参阅jsfiddle

或者向表单添加 novalidate 属性将会有所帮助:

<form name="myform" novalidate>

更新

number 类型有一个 step 值控制哪些数字有效(以及 max 和 min) ，默认为1。该值还用于步进按钮的实现(即，按下时增加step)。

<input type="number" step="0.01">

只需将此值更改为适当的值即可。对于金钱来说，可能需要两位小数:

(如果它只能是正数，我也会设置 min=0)

如果您希望允许任意位数的小数，则可以使用 step="any"(不过对于货币，我建议坚持使用 0.01)。在 Chrome 和 Firefox 中，使用 any 时，步进器按钮将递增/递减 1，请参阅 the relevant spec here )

这是一个展示不同步骤如何影响不同输入类型的 Playground :

<form>
  <input type=number step=1 /> Step 1 (default)<br />
  <input type=number step=0.01 /> Step 0.01<br />
  <input type=number step=any /> Step any<br />
  <input type=range step=20 /> Step 20<br />
  <input type=datetime-local step=60 /> Step 60 (default)<br />
  <input type=datetime-local step=1 /> Step 1<br />
  <input type=datetime-local step=any /> Step any<br />
  <input type=datetime-local step=0.001 /> Step 0.001<br />
  <input type=datetime-local step=3600 /> Step 3600 (1 hour)<br />
  <input type=datetime-local step=86400 /> Step 86400 (1 day)<br />
  <input type=datetime-local step=70 /> Step 70 (1 min, 10 sec)<br />
</form>