当必填字段为空时如何在 Quasar Stepper 中显示错误

雅尼克工程

我使用 Quasar 框架。我创建了一个步进器,在每个步骤中我都有几个字段。有些是这样要求的:

 <q-stepper dense v-model="step" ref="stepper" color="primary" animated header-nav>\
            <q-step dense :name="1" title="Infos générales" icon="settings" :done="step > 1"  :error="step < 3">
                <q-card-section class="q-pt-none">
                    <div class="q-col-gutter-x-md">
                        <q-input class="full-width" dense v-model="infos.motif" label="Raison *" hint="Détaillez la raison. * Champs requis" :rules="Required"></q-input>
                    </div>
                </q-card-section >
               
            </q-step>
           
            <q-step dense :name="2" title="Mise en copie" icon="assignment" :done="step > 2" >
                <q-card-section class="q-pt-none" >
                    <div  class="row items-start content-start" >
                        <div class="text-subtitle2">A la demande</div>
                        <selectusers v-bind:users="users" v-bind:model.sync="infos.copiedemande"></selectusers>
                     </div >\
                </q-card-section >
            </q-step>
            <template v-slot:navigation>
                <q-stepper-navigation >
                    <q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="Retour"  />
                    <q-btn @click="$refs.stepper.next()" color="primary" :label="step === 2 ? \'Fini\' : \'Continuer\'" class="float-right"/>
                </q-stepper-navigation >\
            </template >\
        </q-stepper>

必需是一个计算:Required() { return [(v) => !!v || 'Saisissez quelque selected :-)'] },如果我不填写我的 infos.motif 字段,我希望当我更改步骤时我的第一步显示错误

我没有找到如何链接:从步骤到字段规则的错误感谢您的指导

UPDATE1我在我的第一页中添加了一个带有 ref 的表单。

<q-stepper dense v-model="step" ref="stepper" color="primary" animated header-nav>
            <q-step dense :name="1" ref="step1" title="Infos générales" icon="settings" :done="step > 1"  :error="checkform1()">
                 <q-form ref="myForm1">

其中 checkform1 是一种方法

 checkform1() { return this.$refs.stepper ? this.$refs.stepper.$refs.step1.$refs.myForm1.validate() : true; }

但我无法访问我的表单。当我有 this.$refs.stepper 时,$ref 是空的... UPDATE2我在这里在 codepen 上创建了一个示例

雅尼克工程

我迈出了一大步......这个想法是传递数据并在转换前调用我的 checkform 函数

<div id="q-app">
<q-stepper
  v-model="step"
  header-nav
  ref="stepper"
  color="primary"
  animated
  @before-transition="checkform1"
>
  <q-step
    :name="1"
    title="Select campaign settings"
    icon="settings"
    :done="done1"
    :error="stateform1"
  > <q-form ref="myForm" class="q-gutter-md" >
    <q-input
       v-model="firstName"
       :rules="[val => !!val || 'First name is required']"        
      />
</q-form>
    <q-stepper-navigation>
      <q-btn @click="() => { done1 = true; step = 2 }" color="primary" label="Continue"></q-btn>
    </q-stepper-navigation>
  </q-step>

  <q-step
    :name="2"
    title="Create an ad group"
    caption="Optional"
    icon="create_new_folder"
    :done="done2"
  >
    An ad group contains one or more ads which target a shared set of keywords.

    <q-stepper-navigation>
      <q-btn @click="() => { done2 = true; step = 3 }" color="primary" label="Continue"></q-btn>
      <q-btn flat @click="step = 1" color="primary" label="Back" class="q-ml-sm"></q-btn>
    </q-stepper-navigation>
  </q-step>

  <q-step
    :name="3"
    title="Create an ad"
    icon="add_comment"
    :done="done3"
  >
    text3

    <q-stepper-navigation>
      <q-btn color="primary" @click="done3 = true" label="Finish"></q-btn>
      <q-btn flat @click="step = 2" color="primary" label="Back" class="q-ml-sm"></q-btn>
    </q-stepper-navigation>
  </q-step>
</q-stepper>
 </div>
</div>

和js

new Vue({
el: '#q-app',
data () {
return {
  step: 1,
  done1: false,
  done2: false,
  done3: false,
   firstName: '',
  stateform1:false
}
},
methods: {
reset () {
  this.done1 = false
  this.done2 = false
  this.done3 = false
  this.step = 1
  this.stateform1=false
  this.firstName= ''
},
checkform1() {
 if (this.$refs.myForm) {
    this.$refs.myForm.validate().then(success => {
      if (success) {
        this.stateform1= false;
      }
      else {
       this.stateform1= true;
      }
    });
  }
} //this.step<3; 
}
})

喜欢这里

但留下另一个问题。当我在特定步骤时,其他形式不存在...如果我通过 step1 tp 步骤 3...我无法检查 step2 就像你可以看到在这里输入链接描述

最后我找到了另一种方法。我保留我的 :error="stateform1" 但我在服务器端另外检查,如果我缺少一个字段,我返回我的步骤的名称并在我返回错误时更改变量

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

必填字段为空时如何在 Excel 中创建警告消息

Django中必填字段为空时的表单验证错误

如何在Phoenix框架中为必填字段添加自定义错误消息

如何在extjs中以黄色突出显示必填字段

如何在Django中的视图代码中指定字段是否为必填字段?

在jQuery Validate插件中,如何仅验证必填字段为空(不进行语法验证)?

如何在 Vue/Quasar 中添加 TAB?

如何让 Quasar QDialog 在移动线上全屏显示?

在Vuetify Stepper中时,Handsontable不会立即显示

Quasar:如何从数组对象中获取值?

如何忽略Quasar Webpack中的“ fs”模块

如何在CMS中设置必填字段

如何在Firebase中创建必填字段验证

如何在Sequelize中创建必填字段?

如何在Rails中创建必填字段?

如何在Mat-Stepper中隐藏Mat-Stepper标头?

如何在Android中为textview / edittext添加星号红色标记以使其成为必填字段?

如何在Quasar中添加自定义属性?

如何在Quasar Frramework中添加@ vue / apollo-composable

如何在Quasar中全局注册组件?

如何在抽屉组件的Vue / Quasar中更改图片?

如何在 Vue/Quasar 中读取 js 脚本

提升记录:必填字段为空值,但没有验证错误

Android Material Stepper 在导航回视图后显示空视图

如何在 Razr 中显示空的必填输入字段

如何在Stepper中验证每个表单步骤

如何在 Flutter 中传递 Stepper 上的列表

如何使PHP验证表单中的下拉菜单显示“ *必填字段”错误消息?

React,Material-UI和Stepper:如何在每个步骤中显示HTML