jquery 显示空白字段的验证错误消息

pdkcd3nj  于 11个月前  发布在  jQuery
关注(0)|答案(1)|浏览(147)

我有一个下拉列表控件。我想显示一个空的错误消息,如果用户不选择任何项目的下拉。下面是HTMl标记的下拉,因为实际的下拉是在Telerik:

<div class="col-md-6">
                        <label style="font-weight:bold" class="control-label required" for="AwardId">Nominated for these Awards</label>
                        <input disabled="disabled" id="AwardName" name="AwardName" required="required" style="width:100%" type="text" value="" /><script>kendo.syncReady(function(){jQuery("#AwardName").kendoDropDownList({"autoBind":false,"cascadeFrom":"EmployeeNumber","dataTextField":"AwardCategory1","dataValueField":"AwardId","enable":false,"optionLabel":"Select award...","dataSource":{"transport":{"read":{"url":"/AdditionalInformation/Cascading_GetAwards","data":filterAwards},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}}});});</script>
                    </div>

字符集
这是页面底部的输入按钮。

<input type="submit" value="Submit" class="btn btn-primary"  />


我尝试以这种方式显示错误消息:

<input type="submit" value="Submit" class="btn btn-primary" onclick="checkValidity()" />

<script>
      function checkValidity()
    {
        
        const inpObj = document.getElementById("AwardName");
        alert(inpObj);
        if (!inpObj.checkValidity()) {
            document.getElementById("demo").innerHTML = inpObj.validationMessage;
    }
</script>


当我运行我的代码,并点击提交按钮。我没有看到任何错误消息。

iq3niunx

iq3niunx1#

请考虑以下情况。

<form>
  <div class="col-md-6">
    <label style="font-weight:bold" class="control-label required" for="AwardId">Nominated for these Awards</label>
    <input disabled="disabled" id="AwardName" name="AwardName" required="required" style="width:100%" type="text" value="" />
    <script>
      kendo.syncReady(function() {
        jQuery("#AwardName").kendoDropDownList({
          "autoBind": false,
          "cascadeFrom": "EmployeeNumber",
          "dataTextField": "AwardCategory1",
          "dataValueField": "AwardId",
          "enable": false,
          "optionLabel": "Select award...",
          "dataSource": {
            "transport": {
              "read": {
                "url": "/AdditionalInformation/Cascading_GetAwards",
                "data": filterAwards
              },
              "prefix": ""
            },
            "serverFiltering": true,
            "filter": [],
            "schema": {
              "errors": "Errors"
            }
          }
        });
      });
    </script>
  </div>
  <input type="submit" value="Submit" class="btn btn-primary" onclick="checkValidity()" />
</form>
<script>
  function checkValidity(event) {
    event.preventDefault();
    const inpObj = document.getElementById("AwardName");
    alert(inpObj);
    if (!inpObj.checkValidity()) {
      document.getElementById("demo").innerHTML = inpObj.validationMessage;
      return false;
    }
    return true;
</script>

字符集
这将对click事件执行操作并阻止默认事件操作。它应该检查有效性,如果有效,则继续(return true将继续事件),否则显示突出显示(return false将保持事件停止)。
由于用户可以submit的形式,而无需单击按钮,他们可以绕过这一点。这是更好地执行有效性提交的行动,而不是只当用户单击提交按钮。

相关问题