启用隐藏元素的验证

时间:2017-12-04 18:20:44

标签: jquery asp.net-mvc validation

您好我想在MVC 5中验证隐藏字段值。下面是视图侧代码

@Html.HiddenFor(m => m.DecalLogoFileName, new { id = "hdImageName" })
@Html.ValidationMessageFor(model => model.DecalLogoFileName)

我有很多编辑器控件,其验证正在起火,但是这个验证控件如何在提交时点击

<img id="DecalLogo" name="DecalLogo" class="photo" ImageUrl="" />
@Html.HiddenFor(m => m.DecalLogoFileName, new { id = "hdImageName" })
@Html.ValidationMessageFor(model => model.DecalLogoFileName)
<label for="imgInp" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i>Upload Logo
</label>
<input type='file' id="imgInp" name="image" />

<script type="text/javascript">
//Preview & Update an image before it is uploaded
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#DecalLogo').attr('src', e.target.result);
            $('#hdImageName').val(e.target.result);//Here I am filling my Hidden field control
        }
        reader.readAsDataURL(input.files[0]);
    }
}
$("#imgInp").change(function () {
    readURL(this);        
});

从上面的脚本代码我填写隐藏字段控件的值,我想验证luike如果没有触发此脚本,那么验证应该显示。

如何在MVC中验证提交点击图片是否上传。

1 个答案:

答案 0 :(得分:1)

基本上jQuery validate会忽略hidden fieldsdisplay:none并且任何具有隐形父级的元素都可以通过应用来覆盖默认行为

$("#yourformid").data("validator").settings.ignore = "";

$.validator.setDefaults({ ignore: [] });

  

这不应该在 document.ready

上面的代码行将验证您在某些情况下传递的表单中的所有隐藏字段,在某些情况下它不太好,您只想验证具有特定类XYZ的隐藏字段然后执行如下所示

$.validator.setDefaults({ ignore: ':hidden:not(.XYZ)' });,

上面的代码行设置验证器作为忽略所有隐藏字段但验证其类为XYZ

的隐藏字段的方法

<强>更新

验证具有特定class的字段,即使它已被隐藏。

$(document).ready(function() {
  $.validator.setDefaults({
    ignore: ":hidden:not('.Validateclass')" // validate all hidden fields with specified class
  });
  $('form').valid();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="form">
  <input class="Validateclass" name="hoge1" type="hidden" data-val-required="The field is required." data-val="true" required />
  <span data-valmsg-for="hoge1" data-valmsg-replace="true"></span>
  <input name="hoge2" type="hidden" data-val-required="The field is required." data-val="true" required/>
  <span data-valmsg-for="hoge2" data-valmsg-replace="true"></span>
  <input type="submit" />
</form>