[{"data":1,"prerenderedAt":792},["ShallowReactive",2],{"content-en-\u002Fexamples\u002Fmunicipality-validation":3},{"id":4,"title":5,"body":6,"description":785,"extension":786,"meta":787,"navigation":137,"path":788,"seo":789,"stem":790,"__hash__":791},"content_en\u002Fexamples\u002Fmunicipality-validation.md","Municipality validation",{"type":7,"value":8,"toc":783},"minimark",[9,13,22,779],[10,11,5],"h1",{"id":12},"municipality-validation",[14,15,16,17,21],"p",{},"With a prefecture selected, enter a municipality name. Validation runs when the field loses focus. Names that do not match an exact official name show an error (",[18,19,20],"code",{},"getLocalGovCodeByName","). Town\u002Fstreet and building fields are decorative only.",[23,24,25,32,330],"example-pair",{},[26,27,29],"template",{"v-slot:demo":28},"",[30,31],"municipality-validation-demo",{},[26,33,34],{"v-slot:html":28},[35,36,40],"pre",{"className":37,"code":38,"language":39,"meta":28,"style":28},"language-html shiki shiki-themes github-light github-dark","\u003Clabel for=\"prefecture\">Prefecture\u003C\u002Flabel>\n\u003Cselect id=\"prefecture\">\n  \u003Coption value=\"\">Select a prefecture\u003C\u002Foption>\n  \u003C!-- Fill options with listPrefectures() -->\n\u003C\u002Fselect>\n\n\u003Clabel for=\"municipality-name\">Municipality name\u003C\u002Flabel>\n\u003Cinput id=\"municipality-name\" type=\"text\" placeholder=\"千代田区\" \u002F>\n\n\u003Clabel for=\"town\">Town \u002F street address\u003C\u002Flabel>\n\u003Cinput id=\"town\" type=\"text\" placeholder=\"e.g. Marunouchi 1-1-1\" \u002F>\n\n\u003Clabel for=\"building\">Building name\u003C\u002Flabel>\n\u003Cinput id=\"building\" type=\"text\" placeholder=\"e.g. Foo Building 3F\" \u002F>\n\n\u003Cp id=\"message\" hidden>\u003C\u002Fp>\n","html",[18,41,42,74,91,115,122,132,139,160,193,198,219,247,252,273,301,306],{"__ignoreMap":28},[43,44,47,51,55,59,62,66,69,71],"span",{"class":45,"line":46},"line",1,[43,48,50],{"class":49},"sVt8B","\u003C",[43,52,54],{"class":53},"s9eBZ","label",[43,56,58],{"class":57},"sScJk"," for",[43,60,61],{"class":49},"=",[43,63,65],{"class":64},"sZZnC","\"prefecture\"",[43,67,68],{"class":49},">Prefecture\u003C\u002F",[43,70,54],{"class":53},[43,72,73],{"class":49},">\n",[43,75,77,79,82,85,87,89],{"class":45,"line":76},2,[43,78,50],{"class":49},[43,80,81],{"class":53},"select",[43,83,84],{"class":57}," id",[43,86,61],{"class":49},[43,88,65],{"class":64},[43,90,73],{"class":49},[43,92,94,97,100,103,105,108,111,113],{"class":45,"line":93},3,[43,95,96],{"class":49},"  \u003C",[43,98,99],{"class":53},"option",[43,101,102],{"class":57}," value",[43,104,61],{"class":49},[43,106,107],{"class":64},"\"\"",[43,109,110],{"class":49},">Select a prefecture\u003C\u002F",[43,112,99],{"class":53},[43,114,73],{"class":49},[43,116,118],{"class":45,"line":117},4,[43,119,121],{"class":120},"sJ8bj","  \u003C!-- Fill options with listPrefectures() -->\n",[43,123,125,128,130],{"class":45,"line":124},5,[43,126,127],{"class":49},"\u003C\u002F",[43,129,81],{"class":53},[43,131,73],{"class":49},[43,133,135],{"class":45,"line":134},6,[43,136,138],{"emptyLinePlaceholder":137},true,"\n",[43,140,142,144,146,148,150,153,156,158],{"class":45,"line":141},7,[43,143,50],{"class":49},[43,145,54],{"class":53},[43,147,58],{"class":57},[43,149,61],{"class":49},[43,151,152],{"class":64},"\"municipality-name\"",[43,154,155],{"class":49},">Municipality name\u003C\u002F",[43,157,54],{"class":53},[43,159,73],{"class":49},[43,161,163,165,168,170,172,174,177,179,182,185,187,190],{"class":45,"line":162},8,[43,164,50],{"class":49},[43,166,167],{"class":53},"input",[43,169,84],{"class":57},[43,171,61],{"class":49},[43,173,152],{"class":64},[43,175,176],{"class":57}," type",[43,178,61],{"class":49},[43,180,181],{"class":64},"\"text\"",[43,183,184],{"class":57}," placeholder",[43,186,61],{"class":49},[43,188,189],{"class":64},"\"千代田区\"",[43,191,192],{"class":49}," \u002F>\n",[43,194,196],{"class":45,"line":195},9,[43,197,138],{"emptyLinePlaceholder":137},[43,199,201,203,205,207,209,212,215,217],{"class":45,"line":200},10,[43,202,50],{"class":49},[43,204,54],{"class":53},[43,206,58],{"class":57},[43,208,61],{"class":49},[43,210,211],{"class":64},"\"town\"",[43,213,214],{"class":49},">Town \u002F street address\u003C\u002F",[43,216,54],{"class":53},[43,218,73],{"class":49},[43,220,222,224,226,228,230,232,234,236,238,240,242,245],{"class":45,"line":221},11,[43,223,50],{"class":49},[43,225,167],{"class":53},[43,227,84],{"class":57},[43,229,61],{"class":49},[43,231,211],{"class":64},[43,233,176],{"class":57},[43,235,61],{"class":49},[43,237,181],{"class":64},[43,239,184],{"class":57},[43,241,61],{"class":49},[43,243,244],{"class":64},"\"e.g. Marunouchi 1-1-1\"",[43,246,192],{"class":49},[43,248,250],{"class":45,"line":249},12,[43,251,138],{"emptyLinePlaceholder":137},[43,253,255,257,259,261,263,266,269,271],{"class":45,"line":254},13,[43,256,50],{"class":49},[43,258,54],{"class":53},[43,260,58],{"class":57},[43,262,61],{"class":49},[43,264,265],{"class":64},"\"building\"",[43,267,268],{"class":49},">Building name\u003C\u002F",[43,270,54],{"class":53},[43,272,73],{"class":49},[43,274,276,278,280,282,284,286,288,290,292,294,296,299],{"class":45,"line":275},14,[43,277,50],{"class":49},[43,279,167],{"class":53},[43,281,84],{"class":57},[43,283,61],{"class":49},[43,285,265],{"class":64},[43,287,176],{"class":57},[43,289,61],{"class":49},[43,291,181],{"class":64},[43,293,184],{"class":57},[43,295,61],{"class":49},[43,297,298],{"class":64},"\"e.g. Foo Building 3F\"",[43,300,192],{"class":49},[43,302,304],{"class":45,"line":303},15,[43,305,138],{"emptyLinePlaceholder":137},[43,307,309,311,313,315,317,320,323,326,328],{"class":45,"line":308},16,[43,310,50],{"class":49},[43,312,14],{"class":53},[43,314,84],{"class":57},[43,316,61],{"class":49},[43,318,319],{"class":64},"\"message\"",[43,321,322],{"class":57}," hidden",[43,324,325],{"class":49},">\u003C\u002F",[43,327,14],{"class":53},[43,329,73],{"class":49},[26,331,332],{"v-slot:ts":28},[35,333,337],{"className":334,"code":335,"language":336,"meta":28,"style":28},"language-ts shiki shiki-themes github-light github-dark","import { createLocalGovClient } from \"@b4moss\u002Fjp-local-gov-id\";\nimport dataset from \"@b4moss\u002Fjp-local-gov-id-data\";\n\nconst client = await createLocalGovClient({ data: dataset });\n\nconst prefSelect = document.querySelector(\"#prefecture\");\nconst nameInput = document.querySelector(\"#municipality-name\");\nconst message = document.querySelector(\"#message\");\n\nfor (const pref of client.listPrefectures()) {\n  const option = document.createElement(\"option\");\n  option.value = pref.code;\n  option.textContent = pref.name;\n  prefSelect.append(option);\n}\n\nnameInput.addEventListener(\"blur\", async () => {\n  const name = nameInput.value.trim();\n  if (!name) {\n    message.hidden = true;\n    return;\n  }\n\n  const code = await client.getLocalGovCodeByName(name, {\n    prefecture: prefSelect.value,\n    target: \"cities\",\n  });\n\n  message.hidden = false;\n  if (code === null) {\n    message.textContent = \"This municipality name does not exist\";\n  } else {\n    message.textContent = `Valid (code: ${code})`;\n  }\n});\n","ts",[18,338,339,357,371,375,396,400,424,444,464,468,493,515,525,535,546,551,555,584,603,617,630,638,644,649,668,674,686,692,697,710,727,740,751,768,773],{"__ignoreMap":28},[43,340,341,345,348,351,354],{"class":45,"line":46},[43,342,344],{"class":343},"szBVR","import",[43,346,347],{"class":49}," { createLocalGovClient } ",[43,349,350],{"class":343},"from",[43,352,353],{"class":64}," \"@b4moss\u002Fjp-local-gov-id\"",[43,355,356],{"class":49},";\n",[43,358,359,361,364,366,369],{"class":45,"line":76},[43,360,344],{"class":343},[43,362,363],{"class":49}," dataset ",[43,365,350],{"class":343},[43,367,368],{"class":64}," \"@b4moss\u002Fjp-local-gov-id-data\"",[43,370,356],{"class":49},[43,372,373],{"class":45,"line":93},[43,374,138],{"emptyLinePlaceholder":137},[43,376,377,380,384,387,390,393],{"class":45,"line":117},[43,378,379],{"class":343},"const",[43,381,383],{"class":382},"sj4cs"," client",[43,385,386],{"class":343}," =",[43,388,389],{"class":343}," await",[43,391,392],{"class":57}," createLocalGovClient",[43,394,395],{"class":49},"({ data: dataset });\n",[43,397,398],{"class":45,"line":124},[43,399,138],{"emptyLinePlaceholder":137},[43,401,402,404,407,409,412,415,418,421],{"class":45,"line":134},[43,403,379],{"class":343},[43,405,406],{"class":382}," prefSelect",[43,408,386],{"class":343},[43,410,411],{"class":49}," document.",[43,413,414],{"class":57},"querySelector",[43,416,417],{"class":49},"(",[43,419,420],{"class":64},"\"#prefecture\"",[43,422,423],{"class":49},");\n",[43,425,426,428,431,433,435,437,439,442],{"class":45,"line":141},[43,427,379],{"class":343},[43,429,430],{"class":382}," nameInput",[43,432,386],{"class":343},[43,434,411],{"class":49},[43,436,414],{"class":57},[43,438,417],{"class":49},[43,440,441],{"class":64},"\"#municipality-name\"",[43,443,423],{"class":49},[43,445,446,448,451,453,455,457,459,462],{"class":45,"line":162},[43,447,379],{"class":343},[43,449,450],{"class":382}," message",[43,452,386],{"class":343},[43,454,411],{"class":49},[43,456,414],{"class":57},[43,458,417],{"class":49},[43,460,461],{"class":64},"\"#message\"",[43,463,423],{"class":49},[43,465,466],{"class":45,"line":195},[43,467,138],{"emptyLinePlaceholder":137},[43,469,470,473,476,478,481,484,487,490],{"class":45,"line":200},[43,471,472],{"class":343},"for",[43,474,475],{"class":49}," (",[43,477,379],{"class":343},[43,479,480],{"class":382}," pref",[43,482,483],{"class":343}," of",[43,485,486],{"class":49}," client.",[43,488,489],{"class":57},"listPrefectures",[43,491,492],{"class":49},"()) {\n",[43,494,495,498,501,503,505,508,510,513],{"class":45,"line":221},[43,496,497],{"class":343},"  const",[43,499,500],{"class":382}," option",[43,502,386],{"class":343},[43,504,411],{"class":49},[43,506,507],{"class":57},"createElement",[43,509,417],{"class":49},[43,511,512],{"class":64},"\"option\"",[43,514,423],{"class":49},[43,516,517,520,522],{"class":45,"line":249},[43,518,519],{"class":49},"  option.value ",[43,521,61],{"class":343},[43,523,524],{"class":49}," pref.code;\n",[43,526,527,530,532],{"class":45,"line":254},[43,528,529],{"class":49},"  option.textContent ",[43,531,61],{"class":343},[43,533,534],{"class":49}," pref.name;\n",[43,536,537,540,543],{"class":45,"line":275},[43,538,539],{"class":49},"  prefSelect.",[43,541,542],{"class":57},"append",[43,544,545],{"class":49},"(option);\n",[43,547,548],{"class":45,"line":303},[43,549,550],{"class":49},"}\n",[43,552,553],{"class":45,"line":308},[43,554,138],{"emptyLinePlaceholder":137},[43,556,558,561,564,566,569,572,575,578,581],{"class":45,"line":557},17,[43,559,560],{"class":49},"nameInput.",[43,562,563],{"class":57},"addEventListener",[43,565,417],{"class":49},[43,567,568],{"class":64},"\"blur\"",[43,570,571],{"class":49},", ",[43,573,574],{"class":343},"async",[43,576,577],{"class":49}," () ",[43,579,580],{"class":343},"=>",[43,582,583],{"class":49}," {\n",[43,585,587,589,592,594,597,600],{"class":45,"line":586},18,[43,588,497],{"class":343},[43,590,591],{"class":382}," name",[43,593,386],{"class":343},[43,595,596],{"class":49}," nameInput.value.",[43,598,599],{"class":57},"trim",[43,601,602],{"class":49},"();\n",[43,604,606,609,611,614],{"class":45,"line":605},19,[43,607,608],{"class":343},"  if",[43,610,475],{"class":49},[43,612,613],{"class":343},"!",[43,615,616],{"class":49},"name) {\n",[43,618,620,623,625,628],{"class":45,"line":619},20,[43,621,622],{"class":49},"    message.hidden ",[43,624,61],{"class":343},[43,626,627],{"class":382}," true",[43,629,356],{"class":49},[43,631,633,636],{"class":45,"line":632},21,[43,634,635],{"class":343},"    return",[43,637,356],{"class":49},[43,639,641],{"class":45,"line":640},22,[43,642,643],{"class":49},"  }\n",[43,645,647],{"class":45,"line":646},23,[43,648,138],{"emptyLinePlaceholder":137},[43,650,652,654,657,659,661,663,665],{"class":45,"line":651},24,[43,653,497],{"class":343},[43,655,656],{"class":382}," code",[43,658,386],{"class":343},[43,660,389],{"class":343},[43,662,486],{"class":49},[43,664,20],{"class":57},[43,666,667],{"class":49},"(name, {\n",[43,669,671],{"class":45,"line":670},25,[43,672,673],{"class":49},"    prefecture: prefSelect.value,\n",[43,675,677,680,683],{"class":45,"line":676},26,[43,678,679],{"class":49},"    target: ",[43,681,682],{"class":64},"\"cities\"",[43,684,685],{"class":49},",\n",[43,687,689],{"class":45,"line":688},27,[43,690,691],{"class":49},"  });\n",[43,693,695],{"class":45,"line":694},28,[43,696,138],{"emptyLinePlaceholder":137},[43,698,700,703,705,708],{"class":45,"line":699},29,[43,701,702],{"class":49},"  message.hidden ",[43,704,61],{"class":343},[43,706,707],{"class":382}," false",[43,709,356],{"class":49},[43,711,713,715,718,721,724],{"class":45,"line":712},30,[43,714,608],{"class":343},[43,716,717],{"class":49}," (code ",[43,719,720],{"class":343},"===",[43,722,723],{"class":382}," null",[43,725,726],{"class":49},") {\n",[43,728,730,733,735,738],{"class":45,"line":729},31,[43,731,732],{"class":49},"    message.textContent ",[43,734,61],{"class":343},[43,736,737],{"class":64}," \"This municipality name does not exist\"",[43,739,356],{"class":49},[43,741,743,746,749],{"class":45,"line":742},32,[43,744,745],{"class":49},"  } ",[43,747,748],{"class":343},"else",[43,750,583],{"class":49},[43,752,754,756,758,761,763,766],{"class":45,"line":753},33,[43,755,732],{"class":49},[43,757,61],{"class":343},[43,759,760],{"class":64}," `Valid (code: ${",[43,762,18],{"class":49},[43,764,765],{"class":64},"})`",[43,767,356],{"class":49},[43,769,771],{"class":45,"line":770},34,[43,772,643],{"class":49},[43,774,776],{"class":45,"line":775},35,[43,777,778],{"class":49},"});\n",[780,781,782],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":28,"searchDepth":76,"depth":76,"links":784},[],"Sample that validates an exact municipality name","md",{},"\u002Fexamples\u002Fmunicipality-validation",{"title":5,"description":785},"examples\u002Fmunicipality-validation","WJX9sNw04lTBfjdLc8XSQL0hkjxnewIsoN3i0Q0ORgg",1786532353797]