Dua cara untuk membuat pesanan diterjemahkan tersuai untuk borang HTML

Borang HTML mempunyai kaedah terbina dalam untuk mengesahkan input borang dan kawalan lain berdasarkan peraturan yang telah ditetapkan seperti menetapkan input seperti yang diperlukan, menetapkan kekangan minimum dan maksimum untuk slider pelbagai, atau mod tetapan untuk input e-mel untuk memeriksa sama ada formatnya betul. HTML asli dan penyemak imbas memberikan kami banyak ciri "percuma" untuk mengesahkan penyerahan borang tanpa skrip kompleks.

jika ada sesuatu yang tidak disahkan dengan betul? Kami akan mendapat mesej ralat "percuma" untuk ditunjukkan kepada orang yang menggunakan borang tersebut.

Ini biasanya cukup untuk mendapatkan pekerjaan yang dilakukan, tetapi jika kita memerlukan kandungan ralat yang lebih spesifik, kita mungkin perlu mengatasi mesej ini - terutamanya jika kita perlu memproses kandungan yang diterjemahkan di seluruh pelayar. Inilah cara ia berfungsi.

Kekangan API

Kekangan API digunakan untuk mengatasi mesej pengesahan borang HTML lalai dan membolehkan kami menentukan mesej ralat kami sendiri. Chris Ferdinandi juga memberi gambaran terperinci mengenai trik CSS ini.

Singkatnya, API kekangan direka untuk memberikan kawalan ke atas elemen input. API boleh dipanggil dalam satu elemen input atau secara langsung dari elemen bentuk.

Sebagai contoh, katakan kita menggunakan input bentuk mudah ini:

kita boleh menetapkan mesej ralat kita sendiri dengan mendapatkan elemen

dan memanggil kaedah

<label for="fullName">Full Name</label>
<input type="text" id="fullName" required>
<button type="submit" id="btn">Submit</button>

di atasnya, dan kemudian menyampaikannya mesej tersuai:

fullNameInput setCustomValidity() Apabila anda mengklik butang Hantar, mesej yang ditentukan akan dipaparkan di lokasi mesej lalai.

const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");

terjemahan mesej pengesahan bentuk tersuai

Salah satu kes penggunaan utama untuk mesej ralat tersuai adalah untuk mengendalikan pengantarabangsaan yang lebih baik. Kita boleh melakukan ini dalam dua cara utama. Ada cara lain untuk mencapai matlamat ini, tetapi saya akan memperkenalkan di sini yang saya fikir adalah yang paling mudah.

Kaedah 1: Gunakan tetapan bahasa penyemak imbas

Kaedah pertama adalah menggunakan tetapan bahasa penyemak imbas. Kami boleh mendapatkan tetapan bahasa dari penyemak imbas dan kemudian periksa sama ada kami menyokong bahasa. Jika kita menyokong bahasa, kita boleh mengembalikan mesej yang diterjemahkan. Jika kita tidak menyokong bahasa tertentu, tindak balas alternatif disediakan.

terus menggunakan HTML sebelumnya, kami akan membuat objek terjemahan untuk menyelamatkan bahasa pilihan anda (di dalam tag skrip). Dalam kes ini, objek menyokong bahasa Inggeris, Swahili, dan Arab.

Seterusnya, kita perlu mengekstrak tag objek dan memadankannya dengan bahasa penyemak imbas.

const translations = {
  en: {
    required: "Please fill this",
    email: "Please enter a valid email address",

  },
  sw: {
    required: "Sehemu hii inahitajika",
    email: "Tafadhali ingiza anwani sahihi ya barua pepe",
  },
  ar: {
    required: "هذه الخانة مطلوبه",
    email: "يرجى إدخال عنوان بريد إلكتروني صالح",
  }
};

fungsi

di sini membandingkan dan mengembalikan bahasa penyemak imbas yang disokong atau bahasa alternatif dalam bahasa Inggeris. Jalankan contoh, apabila butang diklik, mesej ralat tersuai harus dipaparkan.

// 翻译对象
const supportedLangs = Object.keys(translations);
const getUserLang = () => {
  // 拆分以获取第一部分，浏览器通常为 en-US
  const browserLang = navigator.language.split('-')[0];
  return supportedLangs.includes(browserLang) ? browserLang :'en';
};

// 翻译后的错误消息
const errorMsgs = translations[getUserLang()];
// 表单元素
const form = document.getElementById("myForm");
// 按钮元素
const btn = document.getElementById("btn");
// 名称输入
const fullNameInput = document.getElementById("fullName");
// 错误消息的包装器
const errorSpan = document.getElementById("error-span");

// 单击按钮时……
btn.addEventListener("click", function (event) {
  // 如果名称输入不存在……
  if (!fullNameInput.value) {
    // ……抛出错误
    fullNameInput.setCustomValidity(errorMsgs.required);
    // 为样式设置输入的 .error 类
    fullNameInput.classList.add("error");
  }
});

Kaedah 2: Tetapkan bahasa pilihan dalam penyimpanan tempatan

Kaedah kedua adalah menggunakan tetapan bahasa yang ditentukan pengguna di LocalStorage . Dalam erti kata lain, kami meminta pengguna untuk memilih bahasa pilihan mereka terlebih dahulu dari elemen <option></option> yang mengandungi tag <select></select> pilihan. Sebaik sahaja pilihan dibuat, kami menyimpan keutamaan mereka ke LocalStorage supaya kami dapat merujuknya.

<label for="fullName">Full Name</label>
<input type="text" id="fullName" required>
<button type="submit" id="btn">Submit</button>

Dengan elemen <select></select>, kita boleh membuat skrip yang memeriksa LocalStorage dan menggunakan keutamaan yang disimpan untuk mengembalikan mesej pengesahan tersuai yang diterjemahkan:

const fullNameInput = document.getElementById("fullName");
fullNameInput.setCustomValidity("This is a custom error message");

Skrip ini menetapkan nilai awal kepada pilihan yang dipilih sekarang, menjimatkan nilai kepada LocalStorage, dan mengambilnya dari LocalStorage seperti yang diperlukan. Sementara itu, skrip mengemas kini pilihan yang dipilih dalam setiap peristiwa perubahan yang dicetuskan oleh elemen <select></select> sambil mengekalkan sandaran asal untuk memastikan pengalaman pengguna yang baik.

Jika kita menghidupkan DevTools, apabila memilih keutamaan bahasa, kita akan melihat bahawa nilai pilihan pengguna tersedia di LocalStorage.

Ringkasan

itu sahaja! Saya harap silap mata kecil ini membantu. Saya tahu saya mahu memilikinya sebelum memikirkan cara menggunakan API Kekangan. Ini adalah salah satu perkara di web yang anda tahu mungkin, tetapi kaedah yang tepat sukar dicari.

Rujukan

• Siri Pengesahan Borang (Chris Ferdinandi)
• memahami pemilih kelas pseudo (Chris Coyier)
• Pengesahan Kekangan (MDN)
• Pengesahan Borang Pelanggan (MDN)

Atas ialah kandungan terperinci Dua cara untuk membuat pesanan diterjemahkan tersuai untuk borang HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!