Vee-validate: Update Docs With Examples for Each Validation Rule

[zschuessler]

Is your feature request related to a problem? Please describe.
The old docs had examples on the validation rules page and it was extremely helpful! It lets me quickly reference docs, see how the rules are being implemented visually, and make a quick decision on what I need to do to use the validation rule.

Now when I look at the examples page I get sparse docs on how to use the validator, and often times it's unclear what I actually need to do to make a rule work. Example with a common use case: a password and password confirmation field. Looking at this, I have no idea what to do:
https://baianat.github.io/vee-validate/guide/rules.html#confirmed

Describe the solution you'd like
Add code samples to validator definitions, and possibly even add more description to some.

Describe alternatives you've considered
I had to consult an old article I wrote to see how I implemented a password confirmation field. I wasn't able to easily see how to do that with current docs.

Additional context
n/a

[logaretm]

Some stuff were indeed remove due to major restructure for the docs. I will try to implement something viable this weekend.

[mikepc]

I would like to add that the confirmed example doesn't even work in the doc. So the api is obviously different :\ Could we have a full working example of how to make confirmed work with the latest version?

[mikepc]

The following code seems to work fine, haven't run all the tests but it looks pretty good.

        <md-field :class="newPasswordClass">
            <label>New Passphrase</label>
            <md-input v-validate="'required|min:15'" name="password" data-vv-name="password" v-model="password" type="password"  data-vv-as="passphrase"></md-input>
            <span class="md-helper-text">The new passphrase</span>
            <span class="md-error">{{ errors.first('newPassword') }}</span>
        </md-field>
        <md-field :class="passwordAgainClass">
            <label>New Passphrase (again)</label>
            <md-input v-model="password_confirmation" v-validate="{ is: password }" name="password_confirmation" type="password" data-vv-as="passphrase"></md-input>
            <span class="md-helper-text">Repeat your new passphrase</span>
            <span class="md-error">{{ errors.first('password_confirmation') }}</span>
        </md-field>

[erik-viking]

This doesn't provide a working example of how to use the confirmed rule though.

I've been trying to use this:

<input
                        v-validate="'confirmed:password'"
                        id="passwordConfirm"
                        ref="password_confirmation"
                        v-model="user.passwordConfirm"
                        :required="true"
                        data-vv-as="password"
                        name="password_confirmation"
                        placeholder="Confirm Password"
                    >

and it always shows that the password confirmation does not match, help!

[zschuessler]

@erik-viking this article should still be up to date:
https://zaclee.net/vue/password-confirmation-validation-with-vue-and-vee-validate

(Let me know if it isn't)

[erik-viking]

@zschuessler yes, that's actually where I found how to use the rule properly, but shouldn't this be added to the official docs for vee-validate?

[mikepc]

This would be a great time to PR a doc fix, if you have the time to
contribute.

On Thu, Oct 4, 2018 at 5:59 PM Erik Waibel [e-mail] wrote:

@zschuessler https://github.com/zschuessler yes, that's actually where
I found how to use the rule properly, but shouldn't this be added to the
official docs for vee-validate?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/baianat/vee-validate/issues/1479#issuecomment-427214952,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA1ok5mf0YfpnN69PkfnOqItkTpm7AArks5uhq7zgaJpZM4VP7LN
.

[erik-viking]

Yes, will absolutely love to! Especially since it's Hacktoberfest! I'll try to get a PR submitted over the weekend, thanks!

[zschuessler]

Nice @erik-viking!Also - just noticed you're in Arizona. If you're ever around Phoenix area let's grab a beer.

[ejwaibel]

@zschuessler submitted PR #1637 for updating the documentation for "confirmed" 👍

[ryan-kite]

Hello - have been using this project for a while now and would love to get in on the opportunity to contribute to it. Are there additional areas in the docs that need additional code examples or building out in particular?

[logaretm]

@ryan-kite You could start with the parts that confused you the most, and think of a way to better communicate them to the reader.

I would like to thank everyone in this thread for taking the initiative to improve the docs, let me know if you need any help. I will introduce a code preview-tabbed component like the old docs around the next week to make it easier for you guys.

[ryan-kite]

@logaretm sounds good I can definitely do that, thanks!

[logaretm]

This now addressed in v3 docs, still no tabbed component but it offers both code-samples and live samples.

https://baianat.github.io/vee-validate/api/rules.html