试图验证我的错误消息的形式，似乎不工作

我想在不同的元素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="[email protected]" 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>

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

来源

2017-01-15 Samuel M. King

只需在onClick =“Validate（）”中写入函数名即可。 – Uzair

那么，你的错误是什么？请考虑在问题中添加错误。 – digit

两件事情：

1.-使用 '值' 属性从输入获得的实际值：

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

2 - 设置函数添加到'click'事件中，如果您想使用普通的javaScript，那么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="[email protected]" 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>

来源

2017-01-15 04:24:12

非常感谢我得到它的工作; –

如果您尝试验证提交时的所有元素，请点击。

您可以使用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="[email protected]" 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>

来源

2017-01-15 03:57:18 Deep

试图验证我的错误消息的形式，似乎不工作

回答

相关问题