javascript - 用于验证空输入字段的 JS 函数不起作用

Question

我似乎无法弄清楚我的 JS 有什么问题。我所需要的只是validateForm检查表单上的空字段的功能，而id formId 我从来没有在浏览器上收到警报。

这是我的 JS：

<script>
    $(document).ready(function(){
        window.validateForm = validateForm;
        function validateForm(formId){
        var form=document.getElementById('#formId');
        for(i=0; i<form.childNodes.length; i++)
            if(form.childNodes[i].tagName!='INPUT'||
               typeof form.childNodes[i].value=="undefined")
                continue;
            else{
                var x=form.childNodes[i].value;
                if(x==null||x==""){
                    alert("please fill out all fields");
                    return false;
                }
            }
    }
 </script>

这是html：

  <form id="formId" name="myForm" action="mailto:" onsubmit="return validateForm()" method="post">
  first field: <input type="text" name="first"></br>
  second field: <input type="text" name="second"></br>
  third field: <input type="text" name="third"></br>
  fourth field: <input type="text" name="fourth"></br>
  <input type="submit" value="Submit">

Answer 1

请检查这个小提琴以查看它的实际效果 http://jsfiddle.net/thefourtheye/p9pDu/1/

您的代码需要进行四项更改

1. 像这样更改表单的定义

   <form id="formId" name="myForm" action="mailto:" method="post">
   

2. 您的validateForm函数不需要任何参数。

3. 使用document.getElementById时不要使用#。所以，应该是

   document.getElementById('formId')
   

4. 您只需要这一行来确保validateForm在提交表单时调用它。

   $('#formId').on('submit', validateForm);
   

Answer 2

validateForm函数在文档就绪回调中定义（在回调函数范围内）。这将无法在全球范围内访问。但是您正试图在 onsubmit 事件中访问该功能。

在回调函数中的函数定义之后执行此操作以使该函数全局可用：

window.validateForm = validateForm;