JavaScript 阻止表单提交

Question

我正在处理一个 Django 项目，其中一个表单不会提交。我发现罪魁祸首是一些格式化货币输入的 JavaScript（当我删除 JS 或删除输入type="currency"时，它会提交）这是我的简化形式 - JS 来自用于货币/货币的 html5 输入var currencyInput = document.querySelector('input[type="currency"]')var currency = 'GBP'// format inital valueonBlur({  target: currencyInput})// bind event listenerscurrencyInput.addEventListener('focus', onFocus)currencyInput.addEventListener('blur', onBlur)function localStringToNumber(s) {  return Number(String(s).replace(/[^0-9.-]+/g, ""))}function onFocus(e) {  var value = e.target.value;  e.target.value = value ? localStringToNumber(value) : ''}function onBlur(e) {  var value = e.target.value  var options = {    maximumFractionDigits: 2,    currency: currency,    style: "currency",    currencyDisplay: "symbol"  }  e.target.value = value ?    localStringToNumber(value).toLocaleString(undefined, options) :    ''}<form action="{% url 'create_goal' %}" method="post">  <h4 class="mb-3" id="create">Create a Savings Goal</h4>  <input type="text" class="form-control" id="goalName" name="goalName" value="" required>  <input type="currency" min="0" pattern="^\d*(\.\d{0,2})?$" class="form-control" id="goal" name="goal" required>  <button type="submit" class="btn btn-secondary btn-block">Add Goal</button></form>

Answer 1

你有required并且你有一个pattern="^\d*(\.\d{0,2})?$"

您的货币代码破坏了模式并停止提交，因为 HTML5 验证在修改后的值上失败

所以

1. 允许货币模式或

2. 显示另一个字段，例如输入的跨度或

3. 像我在下面那样删除模式

如果用户未能输入有效金额，您可以在货币代码中设置自定义错误

如何创建 html5 自定义验证？

var currencyInput = document.querySelector('input[type="currency"]')

var currency = 'GBP'

// format inital value

onBlur({

  target: currencyInput

})

// bind event listeners

currencyInput.addEventListener('focus', onFocus)

currencyInput.addEventListener('blur', onBlur)

function localStringToNumber(s) {

  return Number(String(s).replace(/[^0-9.-]+/g, ""))

}

function onFocus(e) {

  var value = e.target.value;

  e.target.value = value ? localStringToNumber(value) : ''

}

function onBlur(e) {

  const tgt = e.target;

  var value = tgt.value

  if (isNaN(value))

    tgt.setCustomValidity('Please enter a valid amount');

  else

    tgt.setCustomValidity('');

  var options = {

    maximumFractionDigits: 2,

    currency: currency,

    style: "currency",

    currencyDisplay: "symbol"

  }

  e.target.value = value ?

    localStringToNumber(value).toLocaleString(undefined, options) :

    ''

}

<form action="{% url 'create_goal' %}" method="post">

  <h4 class="mb-3" id="create">Create a Savings Goal</h4>

  <input type="text" class="form-control" id="goalName" name="goalName" value="" required>

  <input type="currency" min="0" class="form-control" id="goal" name="goal" required>

  <button type="submit" class="btn btn-secondary btn-block">Add Goal</button>

</form>