jquery填充字段返回vee validate错误

kg7wmglp  于 2021-09-29  发布在  Java
关注(0)|答案(0)|浏览(210)

我有一个vue应用程序,它在引导模式中有一个更新表单。单击“编辑”按钮时,它会向用户显示模式,并使用数据库中已有的数据填充表单字段,如下面所示的方法showupdateform()。表单字段按预期填充,但问题出现在我尝试提交表单时,vee validate将所有字段标记为空,除非每个字段都已编辑,否则该字段的错误消息将消失。因此,用户必须对所有字段执行此操作,即使是那些他不需要更改的字段。行为示例如所附屏幕截图所示。我正在使用vee validate 4+是的。下面标题为vee validate的章节中显示了vee validate的示例。
截图

showupdateform()

showUpdateForm(employer) {
  $('#employer-name').val(employer['employer_name']);
  $('#employer-address').val(employer['employer_address']);
  $('#phone-number').val(employer['phone']);
  $('#email').val(employer['email']);
  $('#updateEmployer').modal('show');
},

V形验证段
模板

<template>
  <div class="modal fade" id="updateEmployer">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">
            <h3>Update employer</h3>
          </div>
        </div>

        <div class="modal-body">
          <Form :validation-schema="validation_schema">
            <Field name="employer_name" id="employer-name" type="text" />
            <ErrorMessage name="employer_name" /><br>

            <Field name="employer_address" id="employer-address" type="text" />
            <ErrorMessage name="employer_address" /><br>

            <Field name="phone_number" id="phone-number" type="text" />
            <ErrorMessage name="phone_number" /><br>

            <Field name="email" id="email" type="email" />
            <ErrorMessage name="email" /><br>

            <button class="btn btn-primary w-100 font-weight-bold">Save</button>
          </Form>
        </div>

      </div>
    </div>
  </div>
</template>

剧本

<script>
  import { Form, Field, ErrorMessage } from "vee-validate"
  import * as yup from "yup"

  export default{
    components: {
      Form,
      Field,
      ErrorMessage,
    },

    data(){
      const validation_schema = {
        employer_name: yup.string().required().label("Employer name"),
        employer_address: yup.string().required().label("Employer address"),
        phone_number: yup.string().required().label("Phone number"),
        email: yup.string().required().email().label("Email"),
      }

      return{
          validation_schema,
      }
    },
  }
</script>

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题