vue.js VeeValidate - пользовательский валидатор правильно компилирует ошибки, но не переключает класс ошибок - PullRequest
Новая
       13

vue.js VeeValidate - пользовательский валидатор правильно компилирует ошибки, но не переключает класс ошибок

2 голосов
/ 09 марта 2019

Я написал собственный валидатор, например: 

    created () {
        this.$validator.extend('validateCert', {
            getMessage: (field) => {
                return field + ' is not a valid certificate';
            },
            validate: (value) => {
                return value.startsWith('-----BEGIN CERTIFICATE-----') && value.endsWith('-----END CERTIFICATE-----');
            }
        });
    }

Я прикрепил его к текстовой области внутри модального окна: 

    <div class="pb-3 mr-4">
        <b-form-textarea 
            type="text"
            v-validate="'required|validateCert'"
            data-vv-validate-on="change"
            v-model.trim="signedCerts[index]"
            data-vv-scope="uploadCert"
            :name="'certificate_' + index"
            :class="[{'is-invalid': errors.has('certificate_' + index)}]"
            rows="15"/>
        <fr-validation-error :validatorErrors="errors" :fieldName="'certificate_' + index"></fr-validation-error>
    </div>

Затем - при нажатии кнопки Iвыполните следующее: 

uploadCerts (event) {
    let idmInstance = this.getRequestService(),
        body = {
            fromCSR: true,
            certs: _.each(this.signedCerts, (cert) => { 
                JSON.stringify(cert); 
            })
    };

this.$validator.validateAll('uploadCert').then((valid) => {
    // Prevent modal from closing
    event.preventDefault();

    if (valid) { // some more logic

Если я проверю объект вычисленных ошибок, я увижу мою неудачную проверку: 

{
    "items": [
        {
            "id": "19",
            "field": "certificate_0",
            "msg": "certificate_0 is not a valid certificate",
            "rule": "validateCert",
            "scope": "uploadCert",
            "regenerate": {
                "_custom": {
                    "type": "function",
                    "display": "<span>ƒ</span> regenerate()"
                }
            }
        }
    ]
}

и значение 'valid' (true или false)всегда точенЯ просто не вижу, как запускаются мои классы ошибок.

1 Ответ

0 голосов
/ 11 марта 2019

Трудно полностью ответить на вопрос, потому что отчасти это зависит от того, что происходит в fr-validation-error, но я думаю, что проблема в том, как вы используете области.

Когда вы определяете data-vv-scope="uploadCert", это означает, чтокаждая ссылка на имя поля должна начинаться с uploadCert. в errors.Поэтому, когда вы указываете в :class, что errors.has('certificates_'+index), вы должны изменить это на errors.has('uploadCert.certificates_'+index).

Вот как это будет выглядеть полностью (за исключением бит начальной загрузки и битов нескольких полей): 

    <textarea
      v-validate="'required|validateCert'"
      data-vv-validate-on="change"
      data-vv-scope="uploadCert"
      v-model.trim="signedCert"
      name="certificate"
      class="form-control"
      :class="{ 'is-invalid': errors.has('uploadCert.certificate') }"
      rows="10"
    >
    </textarea>

Полный рабочий пример для одного поля загрузки сертификата: https://codesandbox.io/s/z2owy0r2z3

...