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