はなゐろぐ

主に技術関係の覚え書きです。

parsley.jsでバリデーションしつつaxiosで郵便番号から住所を自動入力

2019年9月10日

入力された郵便番号をバリデーションにかけ、問題なければ郵便番号-住所検索 APIにリクエストを投げ、返ってきた値をセットします。

import $ from 'jquery';
import axios from 'axios';
import 'parsleyjs';
import 'parsleyjs/dist/i18n/ja.js';

$(document).ready(function () {
  const form = $('#form')
    .parsley()
    // バリデーションを通ったら
    .on('field:success', function () {
      // 郵便番号から住所を取得
      if (this.$element[0].name === 'zipcode') {
        const zipcode = this.value;
        // 番号をAPIに投げる
        axios
          .get(`https://api.zipaddress.net/?zipcode=${zipcode}`)
          .then(function (res) {
            // レスポンスが返ってきたら値をセット
            if (res.data.code === 200) {
              $('[name="address"]').val(res.data.data.fullAddress);
            }
          })
          .catch(function () {});
      }
    });
});