Question

根据在字段中实际输入的信息，下面的javascript可以单独具有不同的自定义有效性。例如。对于姓名：＆＃34;请输入姓名＆＃34;。对于位置：＆＃34;请输入位置。脚本中的循环部分让我感到困惑！

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

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

1 个答案: