No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QPopupEdit with QInput internal validation

    Framework
    3
    11
    1116
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • U
      ulrichd last edited by

      The documentation of QPopupEdit mentions here in Tip 2 that one can use the internal validation of QInput via the validation prop. Is this up to date with the current state of QInput? I’m trying to make this work with the QInput rules prop.

      Does anyone have a working QPopupEdit example with QInput internal validation?

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        @ulrichd just look into the code of the example provided https://quasar.dev/vue-components/popup-edit#Example--Edit-with-validation

        U 1 Reply Last reply Reply Quote 0
        • U
          ulrichd @metalsadman last edited by

          @metalsadman thanks, I did look at it. However, the example uses QInput external validation. Here’s what I would like to use:

          <q-input
            ref="puEditIdInp"
            v-model.trim="editVal"
            type="text"
            maxlength="5"
            filled
            dense
            autofocus
            :rules="[numeric, required]"
          />
          

          This way the QInput does the validation, but how do I get QPopupEdit to use the result of that validation? QInput doesn’t seem to emit an event when the validation is done.

          I’d appreciate a nudge in the right direction. 🙂

          1 Reply Last reply Reply Quote 0
          • T
            turigeza last edited by turigeza

            @ulrichd I am not sure if I understand you correctly but here is pen have a look and see if that helps.
            https://codepen.io/turigeza/pen/eYmgPRq?editors=1010

            Where did you get those [numeric, required] ? Have you defined those functions ?

            U 1 Reply Last reply Reply Quote 0
            • U
              ulrichd @turigeza last edited by

              @turigeza That’s a start, but it’s missing the validation on the QPopupEdit. If you delete all the text and hit Enter, it still closes the popup edit menu. The validate prop of QPopupEdit requires a function that returns a boolean. Is there a simple (Vue?) way of getting the result of the QInput validation passed to QpopupEdit?

              I can use:

              validateId(newVal) {
                if (this.$refs.puEditIdInp.hasError) {
                  return false;
                }
                ...
                return true;
              }
              

              as the QPopupEdit validate function, but it feels a bit kludgy…

              Sorry, yes, [numeric, required] are functions I defined externally and pull into the vue file when needed:

              import { alpha, maxLen, minLen, numeric, required } from '../boot/validations';
              ...
                methods: {
                  alpha,
                  maxLen,
                  minLen,
                  numeric,
                  required,
              ...
              
              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman last edited by metalsadman

                @ulrichd well you’ll have to choose which you prefer, looking at the examples either should work in your case. Otherwise youre probably better off using a model based validation like vuelidate, if you want all your validations in one place.

                U 1 Reply Last reply Reply Quote 1
                • T
                  turigeza last edited by turigeza

                  @ulrichd
                  I get it now : ) and you are right it looks silly for the pop up window to close when the field is not validated.
                  Here is a modified pen checking if field is valid. I had to reference the input so I can check if it is validated. The same way you would need to do if you are validating multiple inputs.

                  https://codepen.io/turigeza/pen/eYmgQoG?editors=1010

                  Multiple input aka form validation is here:
                  https://quasar.dev/vue-components/input#Example--Form-validation

                  Notice the
                  <q-popup-edit v-model="label" :validate="()=>!$refs.myInput.hasError">
                  and
                  <q-input v-model="label" ref="myInput"

                  And also note that for performance you should move the function out of inline template the doc says along the line of

                  “Validates model then triggers ‘save’ and closes Popup; Returns a Boolean (‘true’ means valid, ‘false’ means abort); Syntax: validate(value); For best performance, reference it from your scope and do not define it inline”

                  So essentially you are doing it right already …

                  U 1 Reply Last reply Reply Quote 0
                  • U
                    ulrichd @metalsadman last edited by

                    @metalsadman I was afraid of that. I just switched from vuelidate because I found the internal QInput validation much cleaner. 🙂

                    Thanks for confirming though.

                    1 Reply Last reply Reply Quote 0
                    • U
                      ulrichd @turigeza last edited by

                      @turigeza thanks for the codepen. I had tried that before, but not as an inline function - makes sense now!

                      I ended up with a function call anyways, since as a special requirement I have to check the new value is unique and doesn’t duplicate what I already have in my table.

                      Because of that requirement, I also have to decouple both QPopupEdit and QInput from directly manipulating my data table. To me it would make more sense if QPopupEdit would work with a copy of the model up until the moment you save the new value. It makes validation more difficult if the data has already changed in the model. Also, it would prevent the QPoupEdit window from moving across the screen if you type a long string (visible in the example when entering a long string in the popup of the name column for example).

                      metalsadman 1 Reply Last reply Reply Quote 0
                      • metalsadman
                        metalsadman @ulrichd last edited by metalsadman

                        @ulrichd make use of the events so you can filter how the data get’s saved into your vuex. Check api docs, there are several you can use.

                        edit:
                        @ulrichd just dug into my examples, you can use the events i stated above @save and @cancel used in here https://q306jwnjx6.csb.app/vuex-data-table src https://codesandbox.io/s/quasar-v1-umd-q306jwnjx6

                        U 1 Reply Last reply Reply Quote 0
                        • U
                          ulrichd @metalsadman last edited by

                          @metalsadman yes, sorry, forgot to post my code. Here are the relevant parts:

                          <q-td key="id" :props="props">
                            {{ props.row.id }}
                            <q-popup-edit
                              ref="puEditId"
                              v-model.trim="editVal"
                              title="Edit ID"
                              buttons
                              :validate="validateId"
                              @before-show="origVal = editVal = props.row.id"
                              @save="val => updateId(val, props.row)"
                            >
                              <q-input
                                ref="puEditIdInp"
                                v-model.trim="editVal"
                                type="text"
                                maxlength="5"
                                filled
                                dense
                                autofocus
                                :rules="[numeric, required]"
                              />
                            </q-popup-edit>
                          </q-td>
                          ...
                          
                          export default {
                            data() {
                              return {
                                origVal: '',
                                editVal: '',
                          ...
                          
                          updateId(newVal, row) {
                            row.id = newVal;
                          },
                          
                          validateId(newVal) {
                            if (this.$refs.puEditIdInp.hasError) {
                              return false;
                            }
                            if (
                              newVal !== this.origVal &&
                              // check for duplicate ID
                              !this.app.features.every(obj => {
                                return obj.id !== newVal;
                              })
                            ) {
                              this.$q.notify({
                                message: 'A feature with this ID already exists.',
                                color: 'negative',
                                position: 'bottom'
                              });
                              this.$refs.puEditIdInp.focus();
                              return false;
                            }
                            return true;
                          },
                          

                          Thanks for the links - I will have a closer look.

                          Incidentally, I just looked at the example code for QPopupEdit Default scoped slot and saw that it uses the QInput internal validation - might be a good idea to point that out in the validation notes! 😉

                          I wasn’t planning on using a custom form, but that might be a way to go too.

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post