主頁 > 後端開發 > 有沒有辦法從有效性api中列出錯誤?

有沒有辦法從有效性api中列出錯誤?

2022-05-15 21:09:35 後端開發

所以我正在為聯系表單撰寫代碼,并且我第一次嘗試使用有效性 api,因為適應 wcag2.1 標準很難。我在寫作時能夠在每個欄位下得到錯誤,但我還需要一個框,在我提交時在表單頂部列出哪個欄位無效。

    const form  = document.getElementsByTagName('form')[0];
    const email = document.getElementById('mail');
    const emailError = document.querySelector('#mail   span.error');
    const navn = document.getElementById('navn');
    const navnError = document.querySelector('#navn   span.error');
    const telefon = document.getElementById('telefon');
    const telefonError = document.querySelector('#telefon   span.error')
    const message = document.getElementById('message');
    const messageError = document.querySelector('#message   span.error')


    email.addEventListener('input', function (event) {
      if (email.validity.valid) {
        emailError.innerHTML = ''; 
        emailError.className = 'error'; 
      } else {
        showError();
      }
    
    });


    navn.addEventListener('input', function (event) {

        if (navn.validity.valid) {
            navnError.innerHTML = '';
            navnError.className = 'error';

        } else {
            showError();
        }

    })

     telefon.addEventListener('input', function (event) {

        if (telefon.validity.valid) {
            telefonError.innerHTML = '';
            telefonError.className = 'error';

        } else {
            showError();
        }

    })

    
    message.addEventListener('input', function (event) {

        if (message.validity.valid) {
            messageError.innerHTML = '';
            messageError.className = 'error';

        } else {
            showError();
        }

    })

    form.addEventListener('submit', function (event) {

      if(!email.validity.valid || !navn.validity.valid || !telefon.validity.valid || !message.validity.valid) {
        showError();
        event.preventDefault();
      }
 
    });



    function showError() {
      if(email.validity.valueMissing) {

        emailError.textContent = 'Vennligst fyll inn e-posten din';
      } else if(email.validity.typeMismatch) {
 
        emailError.textContent = 'Dette er ikke en gyldig e-postadresse.';
      } else if(email.validity.tooShort) {

        emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
      }
      if(navn.validity.valueMissing) {
          navnError.textContent = 'Du m? fylle inn navnet ditt';
      } else if(navn.validity.tooShort) {
          navnError.textContect = 'Du m? fylle inn hele navnet ditt'
      }
      if(telefon.validity.valueMissing) {
          telefonError.textContent = 'Du m? fylle inn telefonnummeret ditt'
      } else if(telefon.validity.tooShort) {
          telefonError.textContent = 'Du mangler ett eller flere tall. Vennligst dobbeltsjekk.'
      }
      if(message.validity.valueMissing) {
          messageError.textContent = 'Beskjeden mangler, vennligst fyll inn'
          } else if(message.validity.tooShort) {
              messageError.textContent = `Beskjed m? v?re minst ${ message.minLength } tegn.`;
          }
          
      }

      // Set the styling appropriately
      emailError.className = 'error active';
      navnError.className = 'error active';
      telefonError.className = 'error active';
      messageError.className ='error active';
body {
    font: 1em sans-serif;
    width: 200px;
    padding: 0;
    margin : 0 auto;
  }

  p * {
    display: block;
  }

  input[type=email]{
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    border: 1px solid #333;
    margin: 0;

    font-family: inherit;
    font-size: 90%;

    box-sizing: border-box;
  }

  /* This is our style for the invalid fields */
  input:invalid{
    border-color: #900;
    background-color: #FDD;
  }

  input:focus:invalid {
    outline: none;
  }

  /* This is the style of our error messages */
  .error {
    width  : 100%;
    padding: 0;

    font-size: 80%;
    color: white;
    background-color: #900;
    border-radius: 0 0 5px 5px;

    box-sizing: border-box;
  }

  .error.active {
    padding: 0.3em;
  }
<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.6.0.min.js"></script>
  <script src="kontaktskjema.js"></script>
    <link rel="stylesheet" href="kontakt.css">
    <meta charset="utf-8">
    <title>Detailed custom validation</title>
</head>

<body>
    <div class="kontaktskjema">
        <form novalidate>
          <p>
          <label for="navn">
          <span>Navn:</span>
        <input type="text" id="navn" name="navn" required minlength="3">
        <span class="error" aria-live="polite"></span>
      </label>
    </p>    
  </div>
    <form novalidate>
        <p>
          <label for="name">
            <span>Telefonnummer:</span>
            <input type="tel" id="telefon" name="telefon" required minlength="8">
            <span class="error" aria-live="polite"></span>
          </label>
        </p>
        <form novalidate>
            <p>
              <label for="mail">
                <span>E-post:</span>
                <input type="email" id="mail" name="mail" required minlength="6">
                <span class="error" aria-live="polite"></span>
              </label>
            </p>
            <form novalidate>
                <p>
                  <label for="message">
                    <span>Beskjed:</span>
                    <input type="text" id="message" name="message" required minlength="10">
                    <span class="error" aria-live="polite"></span>
                  </label>
                </p>
    <button>Send</button>
  </form>
</div>
<script src="kontakt.js"></script>

</body>

</html>

不要介意css,我會在與我們的網站集成時對其進行編碼。

uj5u.com熱心網友回復:

考慮創建一個div包含錯誤串列的元素,將其放在表單的頂部。

然后您可以輕松地將一些代碼集成到您的showError()函式中,在此示例中,我只是檢查了您已經創建的各種錯誤span元素的文本內容,當出現錯誤時,它會鏡像到表單的頂部。

const form  = document.getElementsByTagName('form')[0];
    const email = document.getElementById('mail');
    const emailError = document.querySelector('#mail   span.error');
    const navn = document.getElementById('navn');
    const navnError = document.querySelector('#navn   span.error');
    const telefon = document.getElementById('telefon');
    const telefonError = document.querySelector('#telefon   span.error')
    const message = document.getElementById('message');
    const messageError = document.querySelector('#message   span.error')
    
    
    // THIS DIV WILL CONTAIN ERROR MESSAGES
    const errOutput = document.querySelector('.errorsOutput')


    email.addEventListener('input', function (event) {
      if (email.validity.valid) {
        emailError.innerHTML = ''; 
        emailError.className = 'error'; 
      } else {
        showError();
      }
    
    });


    navn.addEventListener('input', function (event) {

        if (navn.validity.valid) {
            navnError.innerHTML = '';
            navnError.className = 'error';

        } else {
            showError();
        }

    })

     telefon.addEventListener('input', function (event) {

        if (telefon.validity.valid) {
            telefonError.innerHTML = '';
            telefonError.className = 'error';

        } else {
            showError();
        }

    })

    
    message.addEventListener('input', function (event) {

        if (message.validity.valid) {
            messageError.innerHTML = '';
            messageError.className = 'error';

        } else {
            showError();
        }

    })

    form.addEventListener('submit', function (event) {

      if(!email.validity.valid || !navn.validity.valid || !telefon.validity.valid || !message.validity.valid) {
        showError();
        event.preventDefault();
      }
 
    });



    function showError() {
    
      // EMPTY ERRORS DIV
      errOutput.innerHTML = ''
      
      if(email.validity.valueMissing) {

        emailError.textContent = 'Vennligst fyll inn e-posten din';
      } else if(email.validity.typeMismatch) {
 
        emailError.textContent = 'Dette er ikke en gyldig e-postadresse.';
      } else if(email.validity.tooShort) {

        emailError.textContent = `Email should be at least ${ email.minLength } characters; you entered ${ email.value.length }.`;
      }
      // OUTPUT ERRORS IN DIV
      if (emailError.textContent != '') {
        errOutput.innerHTML  = '<p>Email error!</p>'
      }
      
      if(navn.validity.valueMissing) {
          navnError.textContent = 'Du m? fylle inn navnet ditt';
      } else if(navn.validity.tooShort) {
          navnError.textContect = 'Du m? fylle inn hele navnet ditt'
      }
      // OUTPUT ERRORS IN DIV
      if (navnError.textContent != '') {
        errOutput.innerHTML  = '<p>Navn error!</p>'
      }
      
      if(telefon.validity.valueMissing) {
          telefonError.textContent = 'Du m? fylle inn telefonnummeret ditt'
      } else if(telefon.validity.tooShort) {
          telefonError.textContent = 'Du mangler ett eller flere tall. Vennligst dobbeltsjekk.'
      }
      // OUTPUT ERRORS IN DIV
      if (telefonError.textContent != '') {
        errOutput.innerHTML  = '<p>Telefonnummer error!</p>'
      }
      
      if(message.validity.valueMissing) {
        messageError.textContent = 'Beskjeden mangler, vennligst fyll inn'
      } else if(message.validity.tooShort) {
        messageError.textContent = `Beskjed m? v?re minst ${ message.minLength } tegn.`;
      }
      // OUTPUT ERRORS IN DIV
      if (messageError.textContent != '') {
        errOutput.innerHTML  = '<p>Message error!</p>'
      }
   }
      

      // Set the styling appropriately
      emailError.className = 'error active';
      navnError.className = 'error active';
      telefonError.className = 'error active';
      messageError.className ='error active';
body {
    font: 1em sans-serif;
    width: 200px;
    padding: 0;
    margin : 0 auto;
  }

  p * {
    display: block;
  }

  input[type=email]{
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    border: 1px solid #333;
    margin: 0;

    font-family: inherit;
    font-size: 90%;

    box-sizing: border-box;
  }

  /* This is our style for the invalid fields */
  input:invalid{
    border-color: #900;
    background-color: #FDD;
  }

  input:focus:invalid {
    outline: none;
  }

  /* This is the style of our error messages */
  .error {
    width  : 100%;
    padding: 0;

    font-size: 80%;
    color: white;
    background-color: #900;
    border-radius: 0 0 5px 5px;

    box-sizing: border-box;
  }

  .error.active {
    padding: 0.3em;
  }
<!DOCTYPE html>
<html>

<head>
  <script src="jquery-3.6.0.min.js"></script>
  <script src="kontaktskjema.js"></script>
    <link rel="stylesheet" href="kontakt.css">
    <meta charset="utf-8">
    <title>Detailed custom validation</title>
</head>

<body>
    
    <!-- THIS DIV WILL CONTAIN ERROR MESSAGES -->
    <div class="errorsOutput"></div>
    
    <div class="kontaktskjema">
        <form novalidate>
          <p>
          <label for="navn">
          <span>Navn:</span>
        <input type="text" id="navn" name="navn" required minlength="3">
        <span class="error" aria-live="polite"></span>
      </label>
    </p>    
  </div>
    <form novalidate>
        <p>
          <label for="name">
            <span>Telefonnummer:</span>
            <input type="tel" id="telefon" name="telefon" required minlength="8">
            <span class="error" aria-live="polite"></span>
          </label>
        </p>
        <form novalidate>
            <p>
              <label for="mail">
                <span>E-post:</span>
                <input type="email" id="mail" name="mail" required minlength="6">
                <span class="error" aria-live="polite"></span>
              </label>
            </p>
            <form novalidate>
                <p>
                  <label for="message">
                    <span>Beskjed:</span>
                    <input type="text" id="message" name="message" required minlength="10">
                    <span class="error" aria-live="polite"></span>
                  </label>
                </p>
    <button>Send</button>
  </form>
</div>
<script src="kontakt.js"></script>

</body>

</html>

轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/474751.html

標籤:javascript html css

上一篇:Javascript如何將整數格式化為貨幣字串?

下一篇:返回列表

標籤雲
其他(140575) Python(32497) JavaScript(20484) Java(15603) C(13657) 區塊鏈(8222) AI(7469) 基礎類(6313) C#(6297) MySQL(6088) 爪哇(5919) html(5392) 腳本語言(PerlPython)(5129) 熊猫(5042) PHP(5006) sql(4975) 非技術區(4971) Linux(4733) 数组(4526) R(4422) Android(4340) 反应(4018) 数据框(3527) css(3438) C語言(3288) 节点.js(3227) C++語言(3117) Java相關(2746) 疑難問題(2699) json(2682) 列表(2561) 單片機工控(2479) 扑(2470) 安卓(2455) VBA(2449) 打字稿(2323) 细绳(2092) ASP.NET(2077) iOS(2028) Web開發(1951) MongoDB(1899) 麻木的(1824) 循环(1823) 字典(1819) 網絡通信(1793) 蟒蛇-3.x(1774) 數據庫相關(1767) 正则表达式(1757) 擅长(1755) VB基礎類(1755) .NETCore(1732) 镖(1728) 迅速(1707) C++(1654) 開發(1646) Unity3D(1638) .NET技术(1617) 系統維護與使用區(1617) HtmlCss(1594) 功能(1581)

熱門瀏覽
  • 【C++】Microsoft C++、C 和匯編程式檔案

    ......

    uj5u.com 2020-09-10 00:57:23 more
  • 例外宣告

    相比于斷言適用于排除邏輯上不可能存在的狀態,例外通常是用于邏輯上可能發生的錯誤。 例外宣告 Item 1:當函式不可能拋出例外或不能接受拋出例外時,使用noexcept 理由 如果不打算拋出例外的話,程式就會認為無法處理這種錯誤,并且應當盡早終止,如此可以有效地阻止例外的傳播與擴散。 示例 //不可 ......

    uj5u.com 2020-09-10 00:57:27 more
  • Codeforces 1400E Clear the Multiset(貪心 + 分治)

    鏈接:https://codeforces.com/problemset/problem/1400/E 來源:Codeforces 思路:給你一個陣列,現在你可以進行兩種操作,操作1:將一段沒有 0 的區間進行減一的操作,操作2:將 i 位置上的元素歸零。最終問:將這個陣列的全部元素歸零后操作的最少 ......

    uj5u.com 2020-09-10 00:57:30 more
  • UVA11610 【Reverse Prime】

    本人看到此題沒有翻譯,就附帶了一個自己的翻譯版本 思考 這一題,它的第一個要求是找出所有 $7$ 位反向質數及其質因數的個數。 我們應該需要質數篩篩選1~$10^{7}$的所有數,這里就不慢慢介紹了。但是,重讀題,我們突然發現反向質數都是 $7$ 位,而將它反過來后的數字卻是 $6$ 位數,這就說明 ......

    uj5u.com 2020-09-10 00:57:36 more
  • 統計區間素數數量

    1 #pragma GCC optimize(2) 2 #include <bits/stdc++.h> 3 using namespace std; 4 bool isprime[1000000010]; 5 vector<int> prime; 6 inline int getlist(int ......

    uj5u.com 2020-09-10 00:57:47 more
  • C/C++編程筆記:C++中的 const 變數詳解,教你正確認識const用法

    1、C中的const 1、區域const變數存放在堆疊區中,會分配記憶體(也就是說可以通過地址間接修改變數的值)。測驗代碼如下: 運行結果: 2、全域const變數存放在只讀資料段(不能通過地址修改,會發生寫入錯誤), 默認為外部聯編,可以給其他源檔案使用(需要用extern關鍵字修飾) 運行結果: ......

    uj5u.com 2020-09-10 00:58:04 more
  • 【C++犯錯記錄】VS2019 MFC添加資源不懂如何修改資源宏ID

    1. 首先在資源視圖中,添加資源 2. 點擊新添加的資源,復制自動生成的ID 3. 在解決方案資源管理器中找到Resource.h檔案,編輯,使用整個專案搜索和替換的方式快速替換 宏宣告 4. Ctrl+Shift+F 全域搜索,點擊查找全部,然后逐個替換 5. 為什么使用搜索替換而不使用屬性視窗直 ......

    uj5u.com 2020-09-10 00:59:11 more
  • 【C++犯錯記錄】VS2019 MFC不懂的批量添加資源

    1. 打開資源頭檔案Resource.h,在其中預先定義好宏 ID(不清楚其實ID值應該設定多少,可以先新建一個相同的資源項,再在這個資源的ID值的基礎上遞增即可) 2. 在資源視圖中選中專案資源,按F7編輯資源檔案,按 ID 型別 相對路徑的形式添加 資源。(別忘了先把檔案拷貝到專案中的res檔案 ......

    uj5u.com 2020-09-10 01:00:19 more
  • C/C++編程筆記:關于C++的參考型別,專供新手入門使用

    今天要講的是C++中我最喜歡的一個用法——參考,也叫別名。 參考就是給一個變數名取一個變數名,方便我們間接地使用這個變數。我們可以給一個變數創建N個參考,這N + 1個變數共享了同一塊記憶體區域。(參考型別的變數會占用記憶體空間,占用的記憶體空間的大小和指標型別的大小是相同的。雖然參考是一個物件的別名,但 ......

    uj5u.com 2020-09-10 01:00:22 more
  • 【C/C++編程筆記】從頭開始學習C ++:初學者完整指南

    眾所周知,C ++的學習曲線陡峭,但是花時間學習這種語言將為您的職業帶來奇跡,并使您與其他開發人員區分開。您會更輕松地學習新語言,形成真正的解決問題的技能,并在編程的基礎上打下堅實的基礎。 C ++將幫助您養成良好的編程習慣(即清晰一致的編碼風格,在撰寫代碼時注釋代碼,并限制類內部的可見性),并且由 ......

    uj5u.com 2020-09-10 01:00:41 more
最新发布
  • 有沒有辦法從有效性api中列出錯誤?

    所以我正在為聯系表單撰寫代碼,并且我第一次嘗試使用有效性 api,因為適應 wcag2.1 標準很難。我在寫作時能夠在每個欄位下得到錯誤,但我還需要一個框,在我提交...

    uj5u.com 2022-05-15 21:09:35 more
  • Javascript如何將整數格式化為貨幣字串?

    我有一個整數存盤為美分,即 1700 美分。如何使用 javascript 將其轉換為 $17.00 的字串?我試過了toFixed,Intl.NumberFormat但他們回傳 1700 美元?
    uj5u.co...

    uj5u.com 2022-05-15 21:08:57 more
  • 基本選項卡導航在html中不起作用

    幾乎完成,但它不作業。我認為有一個小錯誤。請糾正我的錯誤。先感謝您我只展示一個navcontent。我的頁面中已經有 Facebook 和 Instagram 的內容。這不是問...

    uj5u.com 2022-05-15 21:08:13 more
  • 根據程式名稱組合兩個資料集

    嗨,我正在努力找出實作某事的最佳方法。我實際上是在進行兩次資料庫呼叫const [emails] = await dbConnection.execute('SELECT name, programme, timestamp...

    uj5u.com 2022-05-15 21:07:25 more
  • 從firestore獲取檔案,無需搜索特定的uid

    我在獲取收藏資訊時遇到問題。使用此代碼,我只能獲取具有特定 uid 的檔案。const snapShot = doc(db, 'Files', 'someUID');const getSnapShot = await getD...

    uj5u.com 2022-05-15 21:06:11 more
  • ReactRouterDom-ReactRouter更改url但不更改頁面

    我正在嘗試使用反應制作一個簡單的路由系統,但是當我單擊鏈接導航到另一個頁面時,它只會更改 URL 但不顯示內容,然后當我按 F5 時,它會顯示一切正常。這是我的...

    uj5u.com 2022-05-15 21:04:50 more
  • SpringMVC(5)-ssm整合實作增刪改查-mybatis層

    mybatis層撰寫完畢后的專案目錄 1.右鍵SpringMVC2專案-》new-》Modual-》選擇maven專案(我的專案名為Study09_ssm),輸入模塊名,點擊Finish 2.第二部的操作就是將idea的基本運行環境搞定,包括:添加web支持,配置tomcat,配置project s ......

    uj5u.com 2022-05-15 20:25:59 more
  • 從Windows中洗掉IE會影響XMLHTTP60嗎?

    當 IE 從 Windows 中洗掉時,這會影響 XMLHTTP60 和我的 Excel VBA 代碼嗎?怎么可能確認?
    uj5u.com熱心網友回復:tl;dr:MSXML6 在 Edge 中可用。由于 MS 沒有...

    uj5u.com 2022-05-15 20:02:42 more
  • 如果特定列在使用Python的Excel作業表中具有背景顏色,則讀取整行

    我有一個 excel 表,其中有幾列背景顏色。我需要獲取所有具有背景顏色的行column B。我試過styleframe但只能從 excel 中選擇特定的單元格,而不是整行。from s...

    uj5u.com 2022-05-15 20:01:02 more
  • 將資料從多個Excel檔案復制到Masterfile

    當談到 VBA 時,我目前是新手,我遇到了需要該領域專家的問題。所以我有一個名為 Archive 的 Masterfile 和 Extract 按鈕,我在一個檔案夾中有多個 excel 作業簿...

    uj5u.com 2022-05-15 19:58:48 more