防止表单提交的JavaScript

Question

我正在做一个Django项目，其中一个表单不会提交。我发现罪魁祸首是一些JavaScript，它格式化了货币输入（当我移除JS或移除输入type=“currency”时，它提交）

这是我的简化表单--JS来自html5货币/货币输入

js lang-js prettyprint-override">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>

Answer 1

您需要，并且您有模式=“^\d*(\.\d{0,2}）？$”

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

所以

null

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>