javascript - 我如何检查一个函数的所有表单元素都不为空？

Question

<form action="surl.php" method="get" id="surl">
   <input type="text" placeholder="name of column" name="column_name"/>

   <textarea placeholder="description for column name" name="description"></textarea>


   <div class="surl"><input type="url" placeholder="first url" name="url1"/></div>


   <div class="surl"><input type="url" placeholder="second url" name="url2"/></div>


   <div class="surl"><input type="url" placeholder="third url" name="url3"/></div>



   <input type="submit" class="surl_submit">
</form>

如果单击提交按钮时我的输入字段或文本区域之一为空，我不想发布表单。我如何同时控制此表单的输入和文本区域字段而不是一个一个控制？

Answer 1

在点击提交时调用验证函数，只有在满足所有要求时才提交表单。

DEMO

HTML

<form action="surl.php" method="get" id="surl">
   <input  id="mytext1" type="text" placeholder="name of column" name="column_name" value="" />
   <textarea  id="mytext2" placeholder="description for column name" name="description"></textarea>
   <div class="surl"><input class="inputUrl" type="url" placeholder="first url" name="url1" value=""/></div>
   <div class="surl"><input  class="inputUrl" type="url" placeholder="second url" name="url2" value=""/></div>
   <div class="surl"><input class="inputUrl" type="url" placeholder="third url" name="url3"/ value=""></div>
   <input type="submit" class="surl_submit" onclick="return validateForm()" value="submit">
</form>

脚本

function validateForm(){
    var input1 = document.getElementById('mytext1');
    var textarea1 = document.getElementById('mytext2');
    var allInputs = document.getElementsByClassName('inputUrl');
    for(var i=0; i<allInputs.length; i++){
        if(!allInputs[i].value){
            return false;
        }
    }

    if(!input1.value){
        return false;
    }else if(!textarea1.value){
        return false;
    }
}