尝试使用错误消息验证我的表单似乎不起作用

Question

我想传递具有相同功能的不同元素ID

function validate(idname, spnname) {
  var getId = document.getElementById(idname);
  if(getId === null || getId === undefined || getId === "") {
    var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
  }
}
validate('firstname', 'spnfirstname');

<body>
  <h1>SUBSCRIBE</h1>
  <form id="frml" method="get" >
    <input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br />
    <input type="text" name="lname" placeholder="Last Name" s="textbox" id="lastname"/><span id="spnlastname"></span><br />
    <input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
    <span id="spnbirthday"></span><br />
    <input type="email" name="" placeholder="someone@example.com" class="textbox" id="email"/><span id="spnemail"></span><br />
    <input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br />
    <input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br />
    //is there another way to do this onClick event in javascript that may help?
    <input id ="btn" type="button" value="Submit" onClick = "return validate()"/>
  </form>
</div>

我收到第二个var和html onClick的错误。 我的问题有所不同，因为这里没有正确回答此问题的答案。 我已经尝试了一切。 我不知道为什么我收到此错误消息。

Answer 1

如果您要验证提交时的所有元素，请单击。

您可以使用querySelector选择全部，然后检查每个元素的值。 如果值为“”，则更改同级span元素的innerHTML。

 var submit = document.querySelector("#btn") submit.addEventListener("click", function() { var elements = document.querySelectorAll("input"); for (var i = 0; i < elements.length; i++) { if (elements[i].value === "") { elements[i].nextElementSibling.innerHTML = "Required Field"; } } });

 <body> <h1>SUBSCRIBE</h1> <form id="frml" method="get"> <input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname" /><span id="spnfirstname"></span> <br /> <input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname" /><span id="spnlastname"></span> <br /> <input type="date" name="Birthday" value="" class="textbox" id="birthday" /> <span id="spnbirthday"></span> <br /> <input type="email" name="" placeholder="someone@example.com" class="textbox" id="email" /><span id="spnemail"></span> <br /> <input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep" /><span id="spnhomep"></span> <br /> <input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp" /><span id="spncellp"></span> <br /> <input id="btn" type="button" value="Submit" /> </form> </div>

Answer 2

两件事情：

1.-使用'value'属性从输入中获取实际值：

var getId = document.getElementById(idname).value;

2.-将函数设置为'click'事件，如果要使用纯Java脚本（紧接在表单之后），则addEventListener可能会有用：

<script>
 document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
</script>

这就是我的工作方式。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <script>
        function validate(idname, spnname){
           var getId = document.getElementById(idname).value;
            console.log(getId);
            if(getId === null || getId === undefined || getId === ""){
                var getSpn = document.getElementById(spnname).innerHTML = "Required Field";
            }
        }
    </script>
    </head>
    <body>
        <h1>SUBSCRIBE</h1>
        <form id="frml" method="get">
            <input type="text" name="fname" placeholder="First Name" class="textbox" id="firstname"/><span id="spnfirstname"></span><br/>
            <input type="text" name="lname" placeholder="Last Name" class="textbox" id="lastname"/><span id="spnlastname"></span><br/>
            <input type="date" name="Birthday" value="" class="textbox" id="birthday"/>
            <span id="spnbirthday"></span><br/>
            <input type="email" name="" placeholder="someone@example.com" class="textbox" id="email"/><span id="spnemail"></span><br/>
            <input type="tel" name="" placeholder="Home Phone" class="textbox" id="homep"/><span id="spnhomep"></span><br/>
            <input type="tel" name="" placeholder="Cell Phone" class="textbox" id="cellp"/><span id="spncellp"></span><br/>
            //is there another way to do this onClick event in javascript that may help
            <input id ="btn" type="button" value="Submit"/>
        </form>
        <script>
            document.getElementById('btn').addEventListener('click', function(){validate('firstname', 'spnfirstname');});
        </script>
    </body
</html>

尝试使用错误消息验证我的表单似乎不起作用

问题描述

2 个解决方案

解决方案1
0 2017-01-15 03:57:18

解决方案2
0 已采纳 2017-01-15 04:24:12

尝试使用错误消息验证我的表单似乎不起作用

问题描述

2 个解决方案

解决方案1 0 2017-01-15 03:57:18

解决方案2 0 已采纳 2017-01-15 04:24:12

解决方案1
0 2017-01-15 03:57:18

解决方案2
0 已采纳 2017-01-15 04:24:12