在按钮上使用Jquery的客户端数据注释验证。

I have a model which has Required attributes in it. Is it possible to do data validation on a button click which is not of type submit. I did refer to this article and this one but it did not solve the issue.

我有一个需要属性的模型。是否可以对不属于submit类型的按钮单击进行数据验证。我确实提到了这篇文章和这篇文章，但它并没有解决问题。

Here's my model code.

这是我的模型代码。

 [Required]
 [Display(Name = "Number of beds")]
 public int Beds { get; set; }
 [Required]
 [Display(Name = "Number of Inpatient Beds")]
 public int InpatientBeds { get; set; }

My View

我的观点

@using (Html.BeginForm(new {id = "form1", @class = "form-horizontal" }))
{

<div class="divPanel">
    <div class="row">
        <div class="col-md-3">                
                @Html.LabelFor(m => m.Beds)
                @Html.TextBoxFor(m => m.Beds, new { @class = "form-control", @type = "number"})
                @Html.ValidationMessageFor(m => m.Beds)

        </div>
        <div class="col-md-3">

                @Html.LabelFor(m => m.InpatientBeds)
                @Html.TextBoxFor(m => m.InpatientBeds, new { @class = "form-control", @type = "number"})
                @Html.ValidationMessageFor(m => m.InpatientBeds)
        </div>
<div class="col-md-3">             
            <button type=button  class="btn btn-primary" id="btnCalculateScore" > Calculate Score</button>
        </div>
 </div>
<div class="col-md-3">           
        <button type="submit" class="btn btn-primary" id="btnSaveChanges" data-toggle="modal"><i class="fa fa-share-square-o"></i> Update Status</button>
    </div>
</div>
}

And my script

我的脚本

$('#btnCalculateScore').on('click', function (evt) {

evt.preventDefault();

if ($('#form1').valid()) {
    //Do Something.
}
}

The validations do not work and the control enters the if loop even though the fields are empty? Is there something I am missing? Also does this approach also give out the validation messages which normally happen on a submit button event?

验证不工作，即使字段为空，控件也进入if循环。有什么东西我遗漏了吗?同样，这种方法是否也会给出通常发生在提交按钮事件上的验证消息?

EDIT :

编辑:

I added a normal Update Status button with type submit and the validations work there fine.

我添加了一个带有submit类型的常规更新状态按钮，验证在那里工作得很好。
I added the id to my form to ensure it does not matter if the View contains another forms.

我将id添加到表单中，以确保视图是否包含其他表单并不重要。

1 个解决方案

#1

I had the same issue and this seemed to resolve it for me.

我也有同样的问题，这似乎可以帮我解决。

@using (Html.BeginForm(new {id = "form1", @class = "form-horizontal" }))

On seeing the page source, this code does not attach the id Form1 to your form. Hence your validation will not happen as the form with id form1 is not found.

当看到页面源代码时，此代码不会将id Form1附加到表单。因此，当没有找到id form1的表单时，您的验证将不会发生。

Instead,assuming your operation is a post and you are saving the data in say Action Method Save and controller Bed you can edit the form to

相反，假设您的操作是一个post，并将数据保存在Action Method Save和controller Bed中，您可以将表单编辑为

@using (Html.BeginForm("Save", "Bed", FormMethod.Post, new { id = "form1",@class = "form-horizontal"}))

This will attach the id parameter to your form(you can check using ViewPageSource) and it should work. There might be a better solution to this, but this worked properly for me without issues.

这将把id参数附加到窗体上(您可以使用ViewPageSource进行检查)，它应该可以工作。也许有更好的解决方案，但这对我来说没有问题。

#1