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
    1. Home
    2. jammy-git
    J
    • Profile
    • Following 0
    • Followers 0
    • Topics 6
    • Posts 10
    • Best 2
    • Groups 0

    jammy-git

    @jammy-git

    2
    Reputation
    3
    Profile views
    10
    Posts
    0
    Followers
    0
    Following
    Joined Last Online

    jammy-git Follow

    Best posts made by jammy-git

    • RE: Q-select with nested or grouped data and filtering?

      If anyone’s interested, I tried both vue-multiselect and vue-treeselect, but none of them gave me the exact functionality of grouping, with unselectable parent items and filtering on all items shown. So I mocked up what I needed using a q-select and q-items: https://codepen.io/jammy-git/pen/KKdarbP?editors=1011

      posted in Help
      J
      jammy-git
    • No validation with q-option-group?

      I need to ensure the user has select an option in an option group when the form is submitted, but it looks like the q-option-group doesn’t have any validation built in (no rules prop, etc). Is this the case? Is it not possible to add validation to q-option-group?

      posted in Help
      J
      jammy-git

    Latest posts made by jammy-git

    • Is there a valid attribute on q-form or similar?

      I’m looking to display an icon at the top of the q-form to display the validation status of the form. When invalid it’ll show an exclamation mark and when valid, a tick mark. I’d like this icon to update automatically/reactively - is there a valid attribute on the q-form component that I can use, rather than have to call validate() after every user input?

      posted in Framework
      J
      jammy-git
    • RE: No validation with q-option-group?

      That works perfectly! Thank you!

      posted in Help
      J
      jammy-git
    • No validation with q-option-group?

      I need to ensure the user has select an option in an option group when the form is submitted, but it looks like the q-option-group doesn’t have any validation built in (no rules prop, etc). Is this the case? Is it not possible to add validation to q-option-group?

      posted in Help
      J
      jammy-git
    • How to apply success/positive state to q-field upon validation being correct?

      When the validation fails on an input field, the input gets a nice red border and the red error message is displayed below. I notice if you change the text-negative to text-positive on div.q-field__control, the red border gets changed to green.

      Is there anyway to automatically apply this state to the field/input/div automatically when all the validation rules pass?

      posted in Help
      J
      jammy-git
    • RE: Q-select with nested or grouped data and filtering?

      If anyone’s interested, I tried both vue-multiselect and vue-treeselect, but none of them gave me the exact functionality of grouping, with unselectable parent items and filtering on all items shown. So I mocked up what I needed using a q-select and q-items: https://codepen.io/jammy-git/pen/KKdarbP?editors=1011

      posted in Help
      J
      jammy-git
    • Q-select with nested or grouped data and filtering?

      I’ve used the select2.js plugin on other projects but I would love to maintain my use of the Quasar framework on this particular project.

      I need to have a q-select field, but with option groups to allow the data to be nested. Only the child items should be selectable (as per native optgroups) and preferably it should all be filterable.

      Is this possible with a q-select? I couldn’t see any way of using nested data or native optgroups?

      posted in Help
      J
      jammy-git
    • RE: Using an async validation rule with Vuelidate doesn't work

      Hi Scott - thanks for the suggestion. It does work well. Unfortunately it breaks the q-form submit functionality where the validation is automatically run and any invalid field is highlighted and the submit is stopped.

      posted in Help
      J
      jammy-git
    • Using an async validation rule with Vuelidate doesn't work

      Not sure if this is specific to Vuelidate or when used with Quasar (have also posted a Vuelidate Github issue). I do note that most of the Vuelidate examples have error messages hardcoded and shown using v-if="$v.field.$invalid", which with Quasar is not needed, but might be the cause of this issue?

      I’ve put together a pen to demonstrate the problem
      https://codepen.io/jammy-git/pen/OJVWjWZ

      I understand the fetch API call should return true/false, but in this example, the call response still evaluates to true. As you can see, the error message is always displayed. I’ve had a look at it seems Quasar thinks the async function always returns false?

      posted in Help
      J
      jammy-git
    • RE: Vuelidate validation minLength or maxLength not working

      Hi - thanks for the quick reply!! Yup, I’ve literally just noticed that error too!

      posted in Help
      J
      jammy-git
    • Vuelidate validation minLength or maxLength not working

      I’ve implemented validation with Vuelidate following this guide: https://medium.com/@email_47764/quasar-form-validation-with-vuelidate-b3aeb3d27fc2

      However, when I try to extend that and use a validation rule that requires a parameter (like minLength or maxLength, the input field is no longer rendered. Everything works fine up until I add in the min/max rules?!

      This is my template:

      <template>
      
      
                      <form @submit.prevent.stop="handleSubmit" class="pb-8 mb-4 w-4/12">
                          <div class="mb-4">
                              <label class="block text-gray-700 text-sm font-bold mb-2" for="name">Name</label>
                              <q-input
                                  v-model.trim="user.name"
                                  outlined
                                  autofocus
                                  label="Name"
                                  @input="$v.user.name.$touch()"
                                  :rules="[
                                      val => $v.user.name.required || 'Name is required',
                                      val => $v.user.name.minLength || "Minimum length is 2 characters",
                                     val => $v.user.name.maxLength || "Maximum length is 40 characters",
                                  ]"
                                  lazy-rules
                              ></q-input>
                          </div>
      
                          <div class="mb-6">
                              <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label>
                              <q-input
                                  v-model.trim="user.email"
                                  outlined
                                  label="Email"
                                  @input="$v.user.email.$touch()"
                                  :rules="[
                                      val => $v.user.email.required || 'Email is required',
                                      val => $v.user.email.email || 'Please enter a valid email address',
                                      val => $v.user.email.maxLength || "Maximum length is 255 characters",
                                  ]"
                                  lazy-rules
                              ></q-input>
                          </div>
      
      
                          <button type="submit" class="w-full bg-red-500 hover:bg-red-700 text-white font-bold p-4 rounded-full focus:outline-none focus:shadow-outline">Save</button>
                          <router-link :to="{ name: 'admin.users' }" class="mt-5 block text-sm hover:font-bold" >Cancel</router-link>
                      </form>
                  </div>
              
              </div>
      
          </div>
      
      </template>
      
      <script>
      import { required, email, minLength, maxLength } from 'vuelidate/lib/validators';
      
      export default {
          data () {
              return {
                  user: {
                      name: '',
                      email: '',
                  }
              }
          },
      
          methods: {
              handleSubmit() {
                  this.errors = this.$v.user.$anyError;
      
                  if ( this.errors === true ) {
                      return;
                  }
      
                  axios.post('users', this.user)
                      .error((error) => {
                          $this.$q.notify({
                              type: 'negative',
                              message: 'There was a problem processing your request',
                              progress: true,
                          })
                      })
                      .then(() => {
                          this.$q.notify({
                              type: 'positive',
                              message: `User has been created successfully.`,
                              progress: true,
                          })
                      })
                      .then(() => {
                          this.$router.push({
                              name: 'users'
                          });
                      });
              }
          },
      
          mounted () {
          },
      
          validations: {
              user: {
                  name: {
                      required,
                      minLength: minLength(2),
                      maxLength: maxLength(40),
                  },
                  email: {
                      required,
                      email,
                      maxLength: maxLength(255),
                  },
              },
          }
      }
      </script>
      
      posted in Help
      J
      jammy-git