Search code examples
vue.jsvue-sweetalert2

How to validate multiple user inputs within just one popup using Vue-SweetAlert2

As a coding training, right now I'm making a web page where you can click a "Create" button, which triggers a popup, where you are supposed to fill in 6 data inputs, whose input style varies like text, select etc. (See the code and the attached image below) 

<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

Technically, it's working. The popup shows up when the "create" button is clicked, and you can fill in all the 6 blanks and click the "OK" button as well. But I want to add some functionalities that check if the user inputs are valid, I mean things like

  • address should be within 50 characters
  • firstName should be within 20 characters
  • customerNumber should include both alphabets and numbers

and so on.

If it were C or Java, I could probably do something like 

if(length <= 50){
    // proceed
} else {
    // warn the user that the string is too long
}

, but when it comes to validating multiple inputs within a single popup using Vue-SweetAlert2, I'm not sure how to do it, and I haven't been able to find any page that explains detailed enough.

If it were just a single input, maybe you could use inputValidor like this 

const {value: ipAddress} = await Swal.fire({
    title: 'Enter an IP address',
    input: 'text',
    inputValue: inputValue,
    showCancelButton: true,
    inputValidator: (value) => {
        if (!value) {
            return 'You need to write something!'
        }
    }
})

if (ipAddress) {
  Swal.fire(`Your IP address is ${ipAddress}`)
}

, but this example only involves "one input". Plus, what this checks is just "whether an IP address has been given or not" (, which means whether there is a value or not, and it doesn't really check if the length of the IP address is correct and / or whether the input string consists of numbers / alphabets).

On the other hand, what I'm trying to do is to "restrict multiple input values (such as the length of the string etc)" "within a single popup". Any idea how I am supposed to do this?

Solution

  • Unfortunately the HTML tags to restrict inputs (e.g. required, pattern, etc.) do not work (see this issues), so I find two work around.

    Using preConfirm as in the linked issues

    You could use preConfirm and if/else statement with Regex to check your requirement, if they are not satisfied you could use Swal.showValidationMessage(error). 

     const{value:formValue} = await Swal.fire({
      title: "Some multiple input",
      html: 
        <input id="swal-input1" class="swal-input1" placeholder="name"> +
        <input id="swal-input2" class="swal-input2" placeholder="phone">,
      preConfirm: () => {
        if($("#swal-input1").val() !== "Joe"){
          Swal.showValidationMessage("your name must be Joe");
        } else if (!('[0-9]+'.test($("#swal-input2").val())){
          Swal.showValidationMessage("your phone must contain some numbers");    
        }
      }
});

    Using Bootstrap

    In this way Bootstrap does the check at the validation, you need to include class="form-control" in your input class and change a little your html code.

    If some conditions fails, the browser shows a validation message for each fields, in the order they are in the html code. 

     const {value: formValue} = await Swal.fire({
        title: 'Some multiple inputs',
        html:
            '<form id="multiple-inputs">' +
                '<div class="form-group">' + 
                    '<input type="text" class="form-control swal-input1" id="swal-input1" min=2 max=4 required>' +
                '</div>' +
                '<div class="form-group">' + 
                    '<input type="text" class="form-control swal-input2" id="swal-input2" placeholder="Name" pattern="[A-Za-z]" required>' +
                '</div>' +
            '</form>', 
});

    I have tried both the solution, actually only with Bootstrap3 but it should work also with the latest release.