QPopupEdit with QInput internal validation

ulrichd

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?

metalsadman

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

ulrichd

@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.

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 ?

ulrichd

@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,
...

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.

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 …

ulrichd

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

Thanks for confirming though.

ulrichd

@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

@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

ulrichd

@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.