如何基于Select的onChange事件在Vuelidate中启用必填校验

Alright, let's tackle this dynamic required validation for your title and content fields based on the selected template option. Here's a straightforward implementation using Vuelidate that fits your needs:

Step 1: Update Validation Rules #

We'll use Vuelidate's requiredIf validator to conditionally make title and content required only when a non-empty option is selected (either "New" or any template from your termsList). The validator's callback gives us access to the parent adForm object, so we can check the value of tnc.

Step 2: Trigger Validation on Selection Change #

To ensure the validation state updates immediately when the user selects an option, we'll add a quick validation trigger in the getTemplate method.

Modified Full Code #

Template (minor tweaks for error feedback):

<template>
  <section class="page_blk">
    <form @submit="submitForm($event)" class="cryp_form">
      <div class="input_ctrl_wrp">
        <label for="username">Template</label>
        <div class="input_select">
          <select @change="getTemplate" v-model="$v.adForm.tnc.$model" name="" id="">
            <option value="">Select</option>
            <option value="New">New</option>
            <option :value="term.idTnCTemplate" v-for="term in termsList" :key="term.idTnCTemplate">{{term.title}}</option>
          </select>
          <i class="fal fa-angle-down"></i>
        </div>
      </div>
      <div class="input_ctrl_wrp">
        <label for="username">Title</label>
        <div class="input_text">
          <input v-model="$v.adForm.title.$model" placeholder="" type="text">
          <!-- Optional: Show error message if validation fails -->
          <span class="error" v-if="$v.adForm.title.$error && $v.adForm.title.required">Title is required</span>
        </div>
      </div>
      <div class="input_ctrl_wrp">
        <label for="username">Terms Of Trade</label>
        <div class="input_textarea">
          <textarea v-model="$v.adForm.content.$model" name="" rows="10"></textarea>
          <!-- Optional: Show error message if validation fails -->
          <span class="error" v-if="$v.adForm.content.$error && $v.adForm.content.required">Content is required</span>
        </div>
      </div>
      <button type="submit">Submit</button>
    </form>
  </section>
</template>

Script (updated validations and methods):

<script>
import { required, requiredIf } from "vuelidate/lib/validators";
export default {
  data() {
    return {
      adForm: {
        tnc: '',
        title: '',
        content: '',
      },
      termsList: [] // Populate this with your template data
    }
  },
  validations: {
    adForm: {
      tnc: { required },
      title: { 
        // Require title when a template (or "New") is selected
        required: requiredIf(adForm => adForm.tnc !== '')
      },
      content: { 
        // Require content when a template (or "New") is selected
        required: requiredIf(adForm => adForm.tnc !== '')
      },
      schedule: { required } // Keeping your original rule
    }
  },
  methods: {
    submitForm(e) {
      e.preventDefault();
      // Validate the entire form before submission
      this.$v.$validate();
      if (!this.$v.$invalid) {
        // Proceed with form submission logic here
        console.log('Valid form data:', this.adForm);
      }
    },
    getTemplate(e) {
      // Refresh validation state immediately after selection changes
      this.$v.$touch();
    }
  },
  mounted() {
    // Load your termsList data here if needed
  }
}
</script>

Key Explanations: #

• Conditional Validation: The requiredIf(adForm => adForm.tnc !== '') rule checks if the user has selected anything other than the empty "Select" option. If true, it enforces the required validation for title and content.
• Immediate Feedback: Calling this.$v.$touch() in getTemplate ensures validation states update right after a selection is made, so error messages (if you added them) appear instantly.
• Submission Guard: In submitForm, we run this.$v.$validate() to confirm all rules are satisfied before processing the form.

If you only want the required validation to trigger specifically when "New" is selected, adjust the condition to adForm.tnc === 'New' instead of adForm.tnc !== ''.

内容的提问来源于stack exchange，提问作者Manush