小贝子编程

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



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

<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属性。设置自定义验证消息?

使用选择器而不是通过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("");
        }
    });
});

小提琴

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium