<commit_before><template>
  <div>
    <ValidationObserver ref="form">
      <h2>Cross field rule</h2>
      <ValidationProvider
        vid="first"
        name="First"
        rules="required|confirmedBy:@second"
        v-slot="{ errors }"
      >
        First
        <input type="text" v-model="first" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider vid="second" name="Second" rules="required" v-slot="{ errors }">
        Second
        <input type="text" v-model="second" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
    </ValidationObserver>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend } from '@vee-validate';

extend('confirmedBy', {
  params: ['target'],
  // Target here is the value of the target field
  validate(value, { target }) {
    return value === target;
  },
  // here it is its name, because we are generating a message
  message: 'The {_field_} does not match the {target}'
});

export default {
  name: 'Example',
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data: () => ({
    first: 'first',
    second: 'second'
  }),
  methods: {}
};
</script>


<style>
span {
  display: block;
  margin-top: 20px;
}

input + span {
  margin-top: 3px;
}
</style><commit_msg>docs: fix example styling<commit_after><template>
  <div>
    <ValidationObserver ref="form">
      <ValidationProvider vid="first" name="First" rules="required|confirmedBy:@second" v-slot="{ errors }">
        First
        <input type="text" v-model="first" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>

      <ValidationProvider vid="second" name="Second" rules="required" v-slot="{ errors }">
        Second
        <input type="text" v-model="second" />
        <span>{{ errors[0] }}</span>
      </ValidationProvider>
    </ValidationObserver>
  </div>
</template>

<script>
import { ValidationProvider, ValidationObserver, extend } from '@vee-validate';

extend('confirmedBy', {
  params: ['target'],
  // Target here is the value of the target field
  validate(value, { target }) {
    return value === target;
  },
  // here it is its name, because we are generating a message
  message: 'The {_field_} does not match the {target}'
});

export default {
  name: 'Example',
  components: {
    ValidationProvider,
    ValidationObserver
  },
  data: () => ({
    first: 'first',
    second: 'second'
  }),
  methods: {}
};
</script>

<style scoped>
span {
  display: block;
  margin-top: 20px;
}

input + span {
  margin-top: 3px;
}
</style>
{'fraction_non_alphanumeric': 0.16249518675394686, 'fraction_numerical': 0.004620716211012707, 'mean_word_length': 3.0530421216848675, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5386469', 'n_tokens_mistral': 822, 'n_tokens_neox': 791, 'n_words': 212}