使用jQuery Validate不会命中远程操作方法

时间:2013-04-10 08:55:04

标签: jquery asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 jquery-validate

我正在使用ASP.NET MVC4jQuery Validate以及jQuery Validate unobtrusive

我的表单上有各种元素,但我只需要验证一个元素。 不要的其他元素需要进行验证。基本上发生的事情是我有一个接受数字的文本框,以及一个按钮(提交表单),该按钮获取此texbox中的数字并进行远程调用以检查数字是否存在,如果然后它必须显示错误信息。

我的观点代码:

<td class="edit-label">Change Control ID/Incident Number: <span class="required">**</span></td>
<td>
     @Html.TextBoxFor(x => x.ChangeIncidentNumber)
     <button id="verifyButton" type="button">Verify</button>
     @Html.ValidationMessageFor(x => x.ChangeIncidentNumber)
</td>

我的观点模型:

public class SearchServerViewModel
{
     // Partial view model

     public string ChangeIncidentNumber { get; set; }
}

我的文本框HTML输出:

<td class="edit-label">Change Control ID/Incident Number: <span class="required">**</span></td>
<td>
     <input data-val="true" data-val-required="Required" id="ChangeIncidentNumber" name="ChangeIncidentNumber" type="text" value="792952" />
     <button id="verifyButton" type="button">Verify</button>
     <span class="field-validation-valid" data-valmsg-for="ChangeIncidentNumber" data-valmsg-replace="true"></span>
</td>

我的jQuery代码:

<script src="/Assets/JavaScripts/jquery-validate/jquery.validate.min.js"></script>
<script src="/Assets/JavaScripts/jquery-validate/jquery.validate.unobtrusive.min.js"></script>

<script>

     $(document).ready(function () {
          $("#ChangeIncidentNumber").validate({
               rules: {
                    ChangeIncidentNumber: {
                         required: true,
                         remote: '/Server/ValidateChangeIncidentNumber'
                    }
                },
                messages: {
                     ChangeIncidentNumber: {
                          required: "Required",
                          remote: "custom message:"
                     }
                }
          });

          $('#verifyButton').click(function () {
               var isValid = $('#ChangeIncidentNumber').valid();
          });
     });

</script>

我的行动方法:

public ActionResult ValidateChangeIncidentNumber(string ChangeIncidentNumber)
{
     // Do whatever needs to be done

     return Json("Test error text", JsonRequestBehavior.AllowGet);
}

在我的web.config中:

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

所需部分有效,如果文本框为空,则显示必填消息。但是如果有价值则没有达到我的行动方法。不确定为什么?

2 个答案:

答案 0 :(得分:0)

在包含不显眼的插件脚本之后调用validate()什么都不做,它只返回由unobtrusive插件创建的验证器实例。所需规则正常工作的唯一原因是因为您在 ChangeIncidentNumber 字段中有[必需]属性。您可以通过渲染文本框中的 data-val-required =“必需”来查看此内容。

是否有[Remote]数据注释属性?我想你需要调查一下。

答案 1 :(得分:0)

  

我的表单上有各种各样的元素,但我只需要一个   元素验证。其他元素不需要验证

然后仅为那些需要验证的字段设置必需属性或自定义属性。

<强> HTML

<div id="formContainer" 
     data-url="@Url.Action("Action Name", "Controller Name", 
     new { area = "Area Name" })"></div>

<input id="BTN" type="button" value="Button" />

JQuery(以下请求可以有get / post / getJSON。所以相应地更改它)

$('#BTN').click(function () {
    var $formContainer = $('#formContainer');
    var url = $formContainer.attr('data-url');
    $formContainer.load(url, function () {
        var $form = $('#myForm');
        $.validator.unobtrusive.parse($form);
        $form.submit(function () { //Here modification can be buton click                
            var $form = $(this);
            if ($form.valid()) {
                $.post(this.action, $(this).serialize(), function (data) {
                    $form.html(data);
                    $form.removeData('validator');
                    $form.removeData('unobtrusiveValidation');
                    $.validator.unobtrusive.parse($form);
                });
            }
            return false;
        });
    });
    return false;
});