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

pdkcd3nj 于 11个月前发布在 jQuery

关注(0)|答案(1)|浏览(148)

我有一个下拉列表控件。我想显示一个空的错误消息，如果用户不选择任何项目的下拉。下面是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>

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

jquery

来源：https://stackoverflow.com/questions/77723743/displaying-validation-error-message-for-blank-field

1条答案

按热度按时间

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的形式，而无需单击按钮，他们可以绕过这一点。这是更好地执行有效性提交的行动，而不是只当用户单击提交按钮。

赞(0）回复(0）举报 11个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答