JavaScript предотвращение отправки формы

Question

Я работаю над проектом Django, и одна из форм не отправляется. Я понял, что виноват какой-то JavaScript, который форматирует ввод валюты (когда я удаляю JS или удаляю ввод type="currency", он отправляет)

Это моя упрощенная форма - JS от 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) {
  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>