Skip to content

Instantly share code, notes, and snippets.

@boonyasukd

boonyasukd/UserSignUp.vue

Last active June 23, 2019 00:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save boonyasukd/9b1fb8aaf6da88179e16786d871b55a6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save boonyasukd/9b1fb8aaf6da88179e16786d871b55a6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. boonyasukd revised this gist Jun 23, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion UserSignUp.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ export default {
    }
    }
    return { userModel, submitForm, isModelValid, errorMsgs };
    return { userModel, submitForm, errorMsgs };
    },
    };
    </script>
  2. boonyasukd created this gist Jun 22, 2019.
    46 changes: 46 additions & 0 deletions UserSignUp.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    <script>
    import { state } from 'vue';
    import { setValidation } from './validator';
    export default {
    setup() {
    const validationRules = {
    firstName: 'required|alpha_spaces|min:3|max:16',
    lastName: 'required|alpha_spaces|min:3|max:16',
    address: 'min:6|max:128',
    phoneNum: 'numeric|length:10',
    email: 'required|email',
    };
    const userModel = state({
    firstName: null,
    lastName: null,
    address: null,
    phoneNum: null,
    email: null,
    });
    // function to simply keep watching/validating model's fields against rules,
    // and return validation result as reactive fields
    const { isModelValid, errorMsgs } = setValidation(userModel, validationRules);
    submitForm() {
    if (isModelValid) {
    // submit data to server
    }
    }
    return { userModel, submitForm, isModelValid, errorMsgs };
    },
    };
    </script>

    <template>
    <form id="user-detail-form">
    <label>First Name:</label>
    <input id="user-firstName" v-model="userModel.firstName" />
    <div class="form-field-error" v-show="errorMsgs['firstName']">{{ errorMsgs['firstName'] }}</div>
    ...
    <button @click="submitForm">Submit</button>
    </form>
    </template>
    18 changes: 18 additions & 0 deletions validator.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    import { watch, value } from 'vue';
    import { Validator } from 'Validator';

    function setValidation(model, rules) {
    const isModelValid = value(true);
    const errorMsgs = value([]);
    const validateAll = () => {
    const v = Validator.make(model, rules);
    isModelValid.value = v.passes();
    errorMsgs.value = v.getErrors();
    };

    for (const prop in rules) {
    watch(() => model[prop], validateAll);
    }

    return { isModelValid, errorMsgs };
    }