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>

如果我的输入字段或textarea之一在提交按钮单击时为空，我不想发布表单。我可以同时控制此表单的输入和textarea字段而不是一个一个地控制吗？ / p>

Answer 1

在输入/ textarea标签中添加一个类，在提交时调用一个函数并执行以下操作：

document.querySelector('.surl_submit').onclick = function(e) {

    var input = document.getElementsByClassName('classname');

    var i = input.length;

    while(i--) {

        if(input[i].value == '') {

            // you could display some sort of message here

            e.preventDefault();
            return;
        }
    }
};

Answer 2

点击submit调用验证功能，仅在满足所有要求时提交表单。

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>

<强> SCRIPT

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;
    }
}

Answer 3

您可以为所有相关字段添加类，例如：“to validate”和使用jquery：

if ($('.tovalidate').filter(function(){return $(this).val()=='';}).length>0)
    //do not submit
else
    //submit

如何在一个函数上检查所有表单元素是否为空？

3 个答案: