How to validate in a multi-step form (created with Bootstrap) using Metadata classes?

125 Views Asked by At

I'm using Asp.net core to create a simple multi-step form with validation. I created a multi-step form as follows. Note that the Next and Previous keys are automatically displayed by Bootstrap and I did not write any code for them.

multi-step form

<link href="~/assets/plugins/stepy/lib/jquery.stepy.css" rel="stylesheet">
.
.
.
    <div class="portlet-body">
     <form class="stepy" role="form" method="post">
         <div asp-validation-summary="ModelOnly" class="text-danger"></div>
         <fieldset title="اطلاعات کلی">
            
             <div class="form-group">
                 <label asp-for="Title" class="control-label"></label>
                 <div class="input-group">
                     <span class="input-group-addon">
                         <i class="icon-user"></i>
                     </span>
                     <input asp-for="Title" class="form-control" />
                     <span asp-validation-for="Title" class="text-danger"></span>
                 </div><!-- /.input-group -->



             </div><!-- /.form-group -->
             <div class="form-group">
                 <label asp-for="ShortDescription" class="control-label"></label>
                 <div class="input-group">
                     <span class="input-group-addon">
                         <i class="icon-user"></i>
                     </span>
                     <input asp-for="ShortDescription" class="form-control" />
                     <span asp-validation-for="ShortDescription" class="text-danger"></span>
                 </div><!-- /.input-group -->
             </div><!-- /.form-group -->

             <div class="form-group">
                 <textarea name="content" class="hide" id="content"><p dir="rtl">
                    <span style="font-family:Tahoma">هم اکنون نوشتن اولین نوشته خود را آغاز کنید...</span>
                    </p></textarea>
                 <div id="editor"></div>
                 <button class="btn btn-success btn-round m-t-10" type="submit">ارسال به فرم</button>
             </div>
         </fieldset>
        
         <fieldset title="اطلاعات جغرافیایی">
             <legend>اطلاعات جغرافیایی</legend>
             <div class="form-group">
                 <label>نشانی</label>
                 <div class="input-group">
                     <span class="input-group-addon">
                         <i class="icon-location-pin"></i>
                     </span>
                     <textarea class="form-control" rows="5" placeholder="نشانی"></textarea>
                 </div><!-- /.input-group -->
             </div><!-- /.form-group -->
             <div class="form-group">
                 <label>کد پستی</label>
                 <div class="input-group">
                     <span class="input-group-addon">
                         <i class="icon-compass"></i>
                     </span>
                     <input type="text" class="form-control ltr text-left" placeholder="نه رقمی">
                 </div><!-- /.input-group -->
             </div><!-- /.form-group -->
         </fieldset>
         <button type="submit" class="stepy-finish btn btn-success">ثبت نام نهایی</button>
     </form>
 </div><!-- /.portlet-body -->
.
.
.


    <script src="~/assets/plugins/jquery/dist/jquery-3.6.1.min.js"></script>
     <script src="~/assets/plugins/stepy/lib/jquery.stepy.min.js"></script>
    <script src="~/assets/js/pages/wizard.js"></script>

and i have a meta data class like this:

    public class Software

{
[Key]
[Column("SoftwareID")]
public int SoftwareId { get; set; }

      [StringLength(350)]
      [Display(Name = "عنوان")]
      [Required(ErrorMessage = "لطفا {0} را پر نمائید")]
      public string Title { get; set; } = null!;
    
      [StringLength(500)]
      [Display(Name = "توضیحات کوتاه")]
      [Required(ErrorMessage = "لطفا {0} را پر نمائید")]
      public string ShortDescription { get; set; } = null!;
      [Display(Name = "متن قبل از تبلیغ")]
      [Required(ErrorMessage = "لطفا {0} را پر نمائید")]
      public string Text1 { get; set; } = null!;

}

What should I change in the code so that when the user clicks on the Next button, if the entered values ​​are wrong, the error messages written in the attributes of the metadata class will be displayed to the user?? Just like when we validate a normal form using Metadata classes

The code I posted has a problem and does not validate.

Attention : I don't want to use jquery validation

0

There are 0 best solutions below