在第二页加载时保持服务器端验证?

时间:2017-05-27 00:13:40

标签: javascript c# jquery html model-view-controller

编程新手有一个问题。在填写表单时,在“首选通信方式”部分中,当选中“移动电话”复选框时,“确认移动电话号码”文本框也会显示,因为我的JavaScript代码会动态显示确认文本框。如果我在“确认手机号码”文本框中的“移动电话”文本框中输入不同的值并提交表单,则会在“确认移动电话号码”文本框中提及“请确保确认移动电话号码匹配”。

但是,当用户提供表单时,文本框“确认手机号码”文本框会从屏幕上消失。由于服务器端验证,当表单被加载时,第二次“确认移动电话号码”文本框再次被隐藏,如果我选择收音机“移动电话”,“确认移动电话号码”文本框再次显示,但这与下面的验证消息它

只是混淆了为什么文本框不记得我的选中值以显示经过验证的文本框,在提交表单后,我认为这是因为我的JavaScript。请帮助和建议

以下是我的服务器端验证码模型:

[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:我查看HTML代码

<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:我的JavaScript代码:

<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>

1 个答案:

答案 0 :(得分:0)

你的问题就在这里。您的服务器正在接受您的验证信息,但不会将其发送回您的客户端。您需要在回复中将该信息包含在您的网页中。

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
    }

根据我的经验,我们通常使用名为models的类来解决此问题。您的验证信息包含在该对象中,并在您发送网页的同一响应中返回。例如:

return("View", model);

这个过程最初可能很复杂,值得一读。