是否在第二页加载时保持服务器端验证？

Question

new to programming had a issue. While completing my form, in the section Preferred way of communication, when checkbox "Mobile telephone" is selected, "Confirm mobile number" textbox also shows because my JavaScript code to show the confirm textbox dynamically. If I enter different value from “Mobile telephone” textbox in the "Confirm mobile number" textbox and submit the form, thenvalidation gets fired under the "Confirm mobile number" textbox mentioning "Please ensure confirm mobile number matches".

However the textbox "Confirm mobile number" textbox disappears from the screen when the form is by a user. Because of server side validation, when the form is loaded the second time "Confirm mobile number" textbox is hidden again and if I select radio "Mobile telephone", "Confirm mobile number" text box shows again, but this with the validation message under it.

Just confused why textbox don't remember my checked value to show the validated text box, after the form is submitted, I assume this is because of my JavaScript. PLEASE HELP AND ADVISE

Below is my model with server side validation code:

[Required(ErrorMessage = "Please select preferred way of communication option.")]
public Commmunication? CCommmunication
{ get; set; }

public enum Commmunication
{

[Display(Name = "Mobile telephone", Order = 0)]
TelephoneNo
}


public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
if (this.CCommmunication == Commmunication.TelephoneNo && string.IsNullOrEmpty(this.MobileTelephoneNo))
{
yield return new ValidationResult("Please enter telephone number", new[] { "MobileTelephoneNo" }); //returns message
}
// Confirm ConfirmMobileTelephoneNo matches.
if (this.CCommmunication == Commmunication.TelephoneNo && ConfirmMobileTelephoneNo != MobileTelephoneNo)
{
yield return new ValidationResult("Please ensure confirm mobile number matches", new[] { "ConfirmMobileTelephoneNo" }); //returns message
}

2: My view HTML code

<div class="col-md-6">
<!-- <i class="fa fa-phone-square" aria-hidden="true"></i>-->
@Html.LabelFor(model => model.MobileTelephoneNo, "Type in your mobile telephone no:", new { @style = "", @class = "", id = "" })
<span class="mobiletelredstar" style="display:none">*</span>
@Html.TextBoxFor(model => model.MobileTelephoneNo, new { placeholder = "Enter your mobile no", @style = "", @class = "form-control", id = "MobileTelephoneNo" })
@Html.ValidationMessageFor(model => model.MobileTelephoneNo)
</div>

<div id="ConfirmMobTelNo" class="confirmmobtelno col-md-6" style="display:none">
<!--  <i class="fa fa-phone-square" aria-hidden="true"></i>-->
@Html.LabelFor(model => model.ConfirmMobileTelephoneNo, "Confirm your mobile telephone no:", new { @style = "", @class = "", id = "" })
<span class="mobiletelredstar" style="display:none">*</span>
@Html.TextBoxFor(model => model.ConfirmMobileTelephoneNo, new { placeholder = "Re-enter your mobile no", @style = "", @class = "form-control", id = "ConfirmMobileTelephoneNo" })
@Html.ValidationMessageFor(model => model.ConfirmMobileTelephoneNo)
</div>

3: My JavaScript code:

<script>

$(document).ready(function () {

$('.communicationRB input[name=CCommmunication]').click(function () {
if ($(this).val() == "TelephoneNo") {
$('.confirmmobtelno').show(); //show this text box
$('.mobiletelredstar').show();
} else {
$('.confirmmobtelno').hide(); //hide textbox
$('.mobiletelredstar').hide();
}
});
</script>

Answer 1

Your problem is in here. Your server is accepting your validation information, but not being sent back to your client. You need to include that information within your response back to your webpage.

public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
    if (this.CCommmunication == Commmunication.TelephoneNo && string.IsNullOrEmpty(this.MobileTelephoneNo))
    {
    yield return new ValidationResult("Please enter telephone number", new[] { "MobileTelephoneNo" }); //returns message
    }
    // Confirm ConfirmMobileTelephoneNo matches.
    if (this.CCommmunication == Commmunication.TelephoneNo && ConfirmMobileTelephoneNo != MobileTelephoneNo)
    {
    yield return new ValidationResult("Please ensure confirm mobile number matches", new[] { "ConfirmMobileTelephoneNo" }); //returns message
    }

In my experience, we usually solve this problem using classes called models . Your validation information is contained within that object, and it's returned in the same response that you send your webpage. Ex:

return("View", model);

This process can be complicated initially, it's worth reading up on.