現在、Vue-SweetAlert2を使ったコードの練習で「Create」ボタンを押すと新規顧客登録のためのポップアップが表示され、6つのデータをそれぞれテキストで書いたりSelectで選択してもらって入力してもらうようなものを作っています。（下記コード・添付画像参照）

<template>
      <v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>

    <br/>

    <p>Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: null
      }
    },
    methods: {
      alertDisplay() {
        const {value: formValues} = await this.$swal.fire({
            title: 'Create private customer',
            html: '<input id="swal-input1" class="swal2-input" placeholder="Customer Number">' +
                '<select id="swal-input2" class="swal2-input"> <option value="fi_FI">fi_FI</option> <option value="sv_SE">sv_SE</option> </select>'
                 + 
                '<input id="swal-input3" class="swal2-input" placeholder="regNo">' +
                '<input id="swal-input4" class="swal2-input" placeholder="Address">' +
                '<input id="swal-input5" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input6" class="swal2-input" placeholder="Last Name">'
                ,
            focusConfirm: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value,
                    document.getElementById('swal-input5').value,
                    document.getElementById('swal-input6').value
                ]
            }
        })
        if (formValues) {
            this.createdCustomer = this.$swal.fire(JSON.stringify(formValues));
            console.log(this.createdCustomer);
        }   
      }
    }
  }
</script>

multiple inputs

一応、ボタンを押すとポップアップは表示されますし、各項目を入力してOKボタンも押せるのですが、ここから更にいくつかの項目に制限をつけたいと思っています。

  • Addressは30文字以内
  • FirstNameは15文字以内
  • LastNameは15文字以内

といった感じです。

これがJavaやC言語などであれば、

if(length <= 30){
    // 処理を進める
} else {
    // 文字列が長すぎるとユーザーに警告する
}

みたいな感じでイメージできるのですが、Vue-SweetAler2のポップアップ内で、しかも複数の入力項目に対して条件分岐みたいなことをどうやればいいのかがよくわかりません。

入力項目が1つだけであれば、inputValidorを使って

const {value: ipAddress} = await Swal.fire({
    title: 'IPアドレスを入力してください',
    input: 'text',
    inputValue: inputValue,
    showCancelButton: true,
    inputValidator: (value) => {
        if (!value) {
            return '何か入力してください'
        }
    }
})

if (ipAddress) {
  Swal.fire(`あなたのIPアドレスは ${ipAddress}　です`)
}

みたいな事もできるようですが、この例ではあくまで「入力値は1つだけ」であり、条件分岐でチェックしているのは「IPアドレスが入力されたかどうか」（つまり値が有るか無いか）だけです。

それに対して、「1つのポップアップ内で」「複数の項目に」「（文字列の長さなどの）制限をかけたい」場合はどうすればいいのでしょうか？

それとも、そもそも「1つポップアップで複数の項目を制限付きで入力してもらう」より、新しいウィンドウを開いてそこで入力してもらうようなデザインにした方が書きやすいのでしょうか？