javascript - 如何为不同的输入设置不同的自定义有效性

Question

下面的 JavaScript 是否可以根据字段中实际输入的信息单独具有不同的自定义有效性。例如。对于名称:“请输入名称”。对于位置:“请输入位置。脚本中的循环部分让我有点困惑!

HTML

<form id="sidebarform" onsubmit="return false" method="post" name="myForm" >
   <input type="text" name="name" id="username" placeholder="Name (eg. Rob James)"required><br>
   <input type="text" name="location" id="userlocation" placeholder="Location (eg. Wacol)" required><br>
   <input type="submit" id="sidebarformsubmit" value="Submit">
</form> 

JAVASCRIPT

<script >
$(document).ready(function() {
    var elements = document.getElementsByTagName("INPUT");
     for (var i = 0; i < elements.length; i++) {
       elements[i].oninvalid = function(e) {
         e.target.setCustomValidity("");
        if (!e.target.validity.valid) {
            e.target.setCustomValidity("Please enter a name.");

        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
  }
 })
 </script>

我正在关注这个问题以了解初始自定义有效性。

HTML5 form required attribute. Set custom validation message?

Answer 1

除了通过 tagName 获取所有内容之外，如何使用选择器，然后设置您想要的任何有效性

$(document).ready(function () {
    $('#username').on({
        invalid: function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter a name.");
             }
        },
        input: function(e) {
            e.target.setCustomValidity("");
        }
    });

    $('#userlocation').on({
        invalid: function (e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("Please enter a location.");
             }
        },
        input: function(e) {
            e.target.setCustomValidity("");
        }
    });
});

FIDDLE