0

Хочу выводить сообщение об ошибке в span'e под текстовым input'ом моей формы. Я использую только серверную валидацию.

Также, хочу оптимизировать и сократить код, используя массивы и циклы.

<template>
<div id='wrapper'>
<form class='form' v-on:submit.prevent="onSubmit">
  <h1>Contact Us</h1>
  <div class='field'>
    <input class='text-input' v-model="formData.name" id='name' name='name' type='text' placeholder="Name">
    <span v-if="showNameMsg" class="danger">{{nameErrorMsg}}</span>
  </div>
  <div class="field">
    <input class="text-input" v-model="formData.email" id='email' name='email' type='text' placeholder="Email">
    <span v-if="showEmailMsg" class="danger">{{emailErrorMsg}}</span>
  </div>
  <div class='field'>
    <textarea class='textarea' v-model="formData.text" cols='10' id='message' name='message' rows='1' placeholder="Message"></textarea>
    <span v-if="showTextMsg" class="danger">{{textErrorMsg}}</span>
  </div>
  <div class='field'>
    <input class='button' type='submit' value='Submit' >
  </div>
</form>

import {Post} from '../services/postService.js'

export default {

data() {
  return {
    formData: {
      email: "",
      name: "",
      text: "",
    },

    showEmailMsg: false,
    showNameMsg: false,
    showTextMsg: false,

    emailErrorMsg: '',
    nameErrorMsg: '',
    textErrorMsg: ''
  }


},

methods: {
  async onSubmit() {
    if (this.formData.email.indexOf("@.") === -1) {
      this.showEmailMsg = true;
    }
    else this.showEmailMsg = false;

    if (this.formData.name === "") {
      this.showNameMsg = true;
    }
    else this.showNameMsg = false;

    if (this.formData.text === "") {
      this.showTextMsg = true;
    }
    else this.showTextMsg = false;

      try {
        await Post(this.formData)
      } catch (e) {
        this.emailErrorMsg = e.response.data.email[0];
        this.textErrorMsg = e.response.data.text[0];
        this.nameErrorMsg = e.response.data.name[0];
      }
    }
  }
}

2
  • 1
    На русском stackoverflow принято задавать вопросы на русском языке. 2 фев 2018 в 10:24
  • да, уже понял это, внесены правки. кто может помочь? 2 фев 2018 в 10:48

1 ответ 1

0
<template>
<div id='wrapper'>
<form class='form' v-on:submit.prevent="onSubmit">
  <h1>Contact Us</h1>
  <div class='field'>
    <input class='text-input' v-model="formData.name" id='name' type='text' placeholder="Name">
    <span class="danger">{{errArray['name']?errArray['name'].toString():''}}</span>
  </div>
  <div class="field">
    <input class="text-input" v-model="formData.email" id='email' type='text' placeholder="Email">
    <span class="danger">{{errArray['email']?errArray['email'].toString():''}}</span>
  </div>
  <div class='field'>
    <textarea class='textarea' v-model="formData.text" cols='10' id='text' rows='1' placeholder="Message"></textarea>
    <span class="danger">{{errArray['text']?errArray['text'].toString():''}}</span>
  </div>
  <div class='field'>
    <input class='button' type='submit' value='Submit' >
  </div>
  <span id='err' class="danger"></span>
</form>

import {Post} from '../services/postService.js'

export default {

data() {
  return {
    formData: {
      email: "",
      name: "",
      text: "",
    },
    errArray: [],
  }
},

methods: {
  async onSubmit() {
    try {
      await Post(this.formData)
    } catch (e) {
      this.errArray = e.response.data;
    }
  }
}

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.