asp.net jQuery“.validate”无法触发验证错误

ee7vknir  于 2023-05-23  发布在  .NET
关注(0)|答案(3)|浏览(189)

如何强制执行所需的规则,并在需要时在SPAN标记内显示错误?
尝试将自定义客户端验证添加到dotNET ASP MV* 网页字段Report.Name。由于其他原因,在重构完成之前,我不能添加不显眼的验证JQuery。现在我正在尝试使用jQuery验证。当我运行下面代码的表示并使用空字段提交时,我可以获得showErrors和submitHandler的触发事件。但是,我没有得到任何无效的表单错误。this.valid()和this.numberOfInvalids()方法的结果是错误数为0。整个过程就像没有错误一样提交。

报表.cshtml

<form method="post" id="formReport">
 . . .
<div class="form-group">
    <label asp-for="Report.Name" validation-for="Report.Name"></label>
    <input type="text" class="form-control" data-val-required="The Report Name field is required." asp-for="Report.Name" />
    <span asp-validation-for="Report.Name" class="text-danger"></span>
</div>
 . . .

渲染HTML:

<input type="text" class="form-control" 
data-val-required="The Report Name field is required." 
data-val="true" 
data-val-maxlength="The field Report Name must be a string or array type with a maximum length of &#x27;35&#x27;." 
data-val-maxlength-max="35" 
id="Report_Name" 
maxlength="35" 
name="Report.Name" value="" />

jQuery:

$(document).ready(function () {
  $("#formReport").validate({
      submitHandler: function (form) {
          this.valid();
          var numOfErrors = this.numberOfInvalids();
          alert("submitHandler: " + numOfErrors);
          submitReport();
      },
      onsubmit: true,
      rules: {
        Report_Name: {
          required: true
        }
      },
      messages: {
        Report_Name: {
          required: "Testing: Report_Name required"
        }
      },
      showErrors: function (errorMap, errorList) {
          var numOfErrors = this.numberOfInvalids();
          alert("showErrors: " + numOfErrors);
      }
  });
}
ru9i0ody

ru9i0ody1#

必须在配置中指定<input>的确切名称属性。".""_"不可互换。由于您的名称不是有效的标识符,因此需要用引号将其括起来。

rules: {
    "Report.Name": {
      required: true
    }
},
messages: {
    "Report.Name": {
      required: "Testing: Report_Name required"
    }
},
vm0i2vca

vm0i2vca2#

你也可以考虑使用vanilla JavaScript。如果表单应该只提交到某个URL,则可以省略最后一个事件侦听器(onsubmit)。
oninvalid事件侦听器(第二个)依赖于input元素上的required属性。当这个属性被设置时,输入将根据maxlength属性进行验证,并且还将假设该值不是空字符串。

// Any input to any input in the form
document.forms.form01.addEventListener('input', e => {
  // if some input, test if input is valid and if so
  // remove the class name 'invalid' being there or not
  if (e.target.validity.valid) {
    e.target.classList.remove('invalid');
  }
});

// If submit button if clicked or the function checkValidity()
// on the form is called this eventlistener will trigger.
// This overrides the default message by calling e.preventDefault();
document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  // when something is invalid (input element being e.target)
  // set the class name 'invalid'
  e.target.classList.add('invalid');
}, true);// notice the parameter 'true'

// If form is valide and the form is submitting
document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('form submitting...');
}, false);
form {
  display: flex;
  flex-direction: column;
}

input~span {
  display: none;
  background-color: orange;
}

input.invalid~span {
  display: inline;
}
<form name="form01">
  <label>
    <span>Report name:</span>
    <input type="text" class="form-control"
      data-val-required="The Report Name field is required." 
      data-val="true" 
      data-val-maxlength="The field Report Name must be a string or array type with a maximum length of &#x27;35&#x27;." 
      data-val-maxlength-max="35"  
      maxlength="35" 
      name="Report.Name"
      required/>
    <span class="text-danger">The field Report Name must be a string or array type with a maximum length of &#x27;35&#x27;.</span>
  </label>
  <label>
    <button type="submit">Submit</button>
  </label>
</form>
xqk2d5yq

xqk2d5yq3#

不需要spedifying规则,消息,或消息。开箱即用的属性工作得很好。我最终需要的是“errorClass”来获得一个错误消息以显示在屏幕上。jQuery不是最好的文档化语言。

$("#frmSaveReport").validate({
    submitHandler: function (form) {
        submitSavedReport();
    },
    errorClass: "text-danger"
});

相关问题