Question

我在2个div元素中有2个span元素。两个span元素都没有id，两个div元素也没有id。

第一个div的第一个输入元素带有一个id（id_name），然后是第一个span元素。

第二个div的第二个输入元素带有一个id（id_password），然后是第二个span元素。

我有一个javascript函数，我在提交表单时调用。在该函数内部，我可以在变量 element_id_name 中获取第一个输入元素，在变量 element_id_password 中获取第二个输入元素。现在我如何获得第一个输入元素之后的第一个span元素？如何获得第二个输入元素之后的第二个span元素？由于我没有span元素的id，我不能使用document.getElementById()。有没有办法通过引用第一个输入元素获得第一个span元素？

这是我的代码：

<html>

<head>
<meta charset="ISO-8859-1">
<title>test</title>
<style type="text/css">
.error_noshow{
    display: none;
}

.error_show{
    color: red;
}
</style>
<script type="text/javascript">
function validate() {
    var element_id_name = document.getElementById("id_name");
    var element_id_password = document.getElementById("id_password");

    return false;
}    
</script>
</head>

<body>
<form id="form_login" method="post" action="" onsubmit="validate();">
    <div>
        <label for="id_name">User Name:</label>
        <input type="text" id="id_name" name="txt_user_name">
        <span class="error_noshow">Required field</span>
    </div>

    <div>
        <label for="id_password">Password:</label>
        <input type="password" id="id_password" name="txt_password">
        <span class="error_noshow">Required field</span>
    </div>

    <button type="submit">Submit</button>
</form>
</body>

</html>

感谢您阅读我的问题。

Answer 1

var spans = document.getElementsByTagName('span');

span[0]是第一个范围，span[1]是第二个范围。但是，这不是首选方法。使用jQuery使其更容易或添加id或classname

Answer 2

要访问下一个span元素，您可以使用nextElementSibling属性。

 <script type="text/javascript">
    function validate() {
        var element_id_name = document.getElementById("id_name");
        var element_id_password = document.getElementById("id_password");
        var firstSpan=element_id_name.nextElementSibling;
        return false;
    }
</script>

但请记住，nextElementSibling无法在所有版本的浏览器中运行，因此您可以使用nextSibling http://www.w3schools.com/dom/prop_node_nextsibling.asp来模拟这个;

Answer 3

您可以使用querySelector按属性查找元素。

＆＃13;

function validate() {
    var element_id_name = document.querySelector("[name=txt_user_name]");
    var element_id_password = document.querySelector("[name=txt_password]");
  
    console.log(element_id_name, element_id_password);

    return false;
}

＆＃13;

.error_noshow{
    display: none;
}

.error_show{
    color: red;
}

＆＃13;

<form id="form_login" method="post" action="" onsubmit="validate();">
    <div>
        <label for="id_name">User Name:</label>
        <input type="text" id="id_name" name="txt_user_name">
        <span class="error_noshow">Required field</span>
    </div>

    <div>
        <label for="id_password">Password:</label>
        <input type="password" id="id_password" name="txt_password">
        <span class="error_noshow">Required field</span>
    </div>

    <button type="submit">Submit</button>
</form>

＆＃13;

Answer 4

我没有回答这个问题，因为有人已经这样做了，但好像你想检查一下用户是否在两个字段中输入内容，你可以跳过javascript并使用HTML5 tag "required"这样的

<input type="text" require />。

如果用户尝试提交，则会收到错误消息。但请记住，旧版本的IE将跳过此检查。

如何获得没有id的span元素，它在没有id的div中

4 个答案: