JavaScript 阻止表单提交答案

【问题标题】：JavaScript preventing form submissionJavaScript 阻止表单提交
【发布时间】：2020-10-06 20:48:11
【问题描述】：

我正在处理一个 Django 项目，但其中一个表单无法提交。我发现罪魁祸首是一些格式化货币输入的 JavaScript（当我删除 JS 或删除输入 type="currency" 时，它会提交）

这是我的简化形式 - JS 来自html5 input for money/currency

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) {
  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>

【问题讨论】：

这似乎不是 Django 问题。我点击了编辑，然后点击了[<>] sn-p 编辑器并将模板替换为 HTML
不，我知道这不是 Django 问题。我不确定你的意思 - 这（不包括一些不相关的标签和继承的模板）是实际呈现的模板。移动函数调用并不能解决问题。唯一的“修复”是删除 JS 或删除 type="currency"
我知道，因此我为您制作了 sn-p。但是既然不是django问题，我们就不需要用django标签污染了
啊标签...好的，谢谢

标签： javascript html

【解决方案1】：

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

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

所以

允许货币模式或
显示另一个字段，例如输入的跨度或
像下面那样删除模式

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

How to create html5 custom validation?

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>

【讨论】：