亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

JavaScript 阻止表單提交

JavaScript 阻止表單提交

慕斯709654 2022-10-08 16:04:21
我正在處理一個 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>
查看完整描述

1 回答

?
牛魔王的故事

TA貢獻1830條經驗 獲得超3個贊

你有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>


查看完整回答
反對 回復 2022-10-08
  • 1 回答
  • 0 關注
  • 105 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號