[SOLVED] required attribute in forms

[chrschdev]

Hey, what about required input fields and their labels? is it my part to append the * indicator at the label of my input field? Setting the required attribute has no effect in quasar 0.14

[benoitranque]

We recomend vuelidate for validation. Very easy to integrate with quasar.

[a47ae]

I would also suggest to use a validation framework, for example vuelidate, as it described here.

But in my opinion, you are right, and required should be a prop on each text input, that just sets the required atrribute on the input. Currently this does not work, because each input is wrapped by another div, so the required atrribute is set on the div instead of the input field.

But maybe, required is not a valid prop for an input, because people may be confused if the labels and error messages were not set on an empty input, because Quasar does not do validation on its own (which is good, because no you can use your favorite validation tools, and no unnesecarry code does bloat up the framework). Maybe @rstoenescu can comment on weather adding required as an prop to input elements is a good idea.

[chrschdev]

hey,
perhaps my question was not clearly asked

i already use vuelidate for validation and i did not suggest to use required as a real property on input.

i only want to ask if i have to append the “*” to the text by my own, like label: “first name *” or if there is a way that do this job automatically, like through the required prop on the q-fields or q-input

thx

[a47ae]

So you want to add a * to indicate that this field is required? If so, I don’t think there is an integrated way to accomplish this. You could write your own component that accomplishes this task, or you just append it manually.

[chrschdev]

ok thank u

[genyded]

One way to do this would be a function (star in this exanple) that handles this. Using this would work if the label is text, a model, or whatever. You could put it into utils.js or something and then pull it in where needed, but here I just showing it as a simple component method. Note that the float-label attribute is now bound with the leading : so that it becomes dynamic:

...
<q-field>
      <q-select class="star"
        v-model="conf.org"
        :float-label="star('Organization')"
        :options="orgList"
      />
    </q-field>
;;;

...
methods: {
    star (text) {
      return `<span> ${text} <span style="color: red;">*</span></span>`
    }
  },
...

You could use this principle to apply it to any attribute for any component.