启用对隐藏元素的验证

Posted 2023-05-09

【中文标题】启用对隐藏元素的验证

【英文标题】：Enable validation for Hidden elements

【发布时间】：2018-05-18 06:50:56

【问题描述】：

您好，我想验证 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】：

基本上jQuery validate 忽略hidden fields,display: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>

【讨论】：

我试过把 @Html.HiddenFor(m => m.DecalLogoFileName, new id = "hdImageName",@class="Validateclass" ) 但没有验证

目前在控制器端编写 model.isvalid 时通过隐藏字段进行验证，这意味着页面会被回发，但我希望在页面回发之前对其进行验证，就像其他验证工作一样

okkk 首先检查控制台$("#yourformid").valid() 它返回什么？

我试过插入这个 $('#submitfilteration').click(function (evt) evt.preventDefault(); var $form = $('form'); if ($form. valid()) alert("hi"); //$(".loader").show(); //$("#gotocontroller").click(); else alert("hello"); );它是有效的。它正在验证隐藏的 nfield 验证

我认为你应该写小提琴代码而不是小提琴。