Question

如果输入值为空，我想检查一个表单，但我不确定最好的方法，所以我尝试了这个：

使用Javascript：

  function checkform()
    {
      if (document.getElementById("promotioncode").value == "")
    {
        // something is wrong
        alert('There is a problem with the first field');
        return false;
    }

    return true;
    }

HTML：

  <form id="orderForm" onSubmit="return checkform()">
      <input name="promotioncode" id="promotioncode" type="text" />
      <input name="price" id="price" type="text" value="&euro; 15,00" readonly="readonly"/>
      <input class="submit" type="submit" value="Submit"/>
  </form>

有人有想法或更好的解决方案吗？

Answer 1

添加required属性是现代浏览器的绝佳方式。但是，您很可能也需要支持旧版浏览器。这个JavaScript将：

验证每个required输入（在提交的表单中）是否已填写。
如果浏览器尚未支持alert属性，则仅提供required行为。

JavaScript：

function checkform(form) {
    // get all the inputs within the submitted form
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i < inputs.length; i++) {
        // only validate the inputs that have the required attribute
        if(inputs[i].hasAttribute("required")){
            if(inputs[i].value == ""){
                // found an empty field that is required
                alert("Please fill all required fields");
                return false;
            }
        }
    }
    return true;
}

请务必将this添加到checkform函数中，无需检查未提交的inputs。

<form id="orderForm" onsubmit="return checkform(this)">
    <input name="promotioncode" id="promotioncode" type="text" required />
    <input name="price" id="price" type="text" value="&euro; 15,00" readonly="readonly"/>
    <input class="submit" type="submit" value="Submit"/>
</form>

Answer 2

根据您计划支持的浏览器，您可以使用HTML5必需属性并放弃JS。

<input name="promotioncode" id="promotioncode" type="text" required />

Fiddle.

Answer 3

演示：http://jsfiddle.net/techsin/tnJ7H/4/#

var form = document.getElementById('orderForm'),
    inputs=[], ids= ['price','promotioncode'];


//findInputs
fi(form);
//main logic is here
form.onsubmit = function(e){
   var c=true;
   inputs.forEach(function(e){ if(!e.value) {c=false;  return c;}  });
   if(!c)  e.preventDefault();
};


//findInputs function
function fi(x){
 var f = x.children,l=f.length;
 while (l) {
    ids.forEach(function(i){if(f[l-1].id == i) inputs.push(f[l-1]); });
    l--;
 } 
}

说明：

要停止提交过程，请使用event.preventDefault。 Event是传递给onsubmit事件的函数的参数。它可以是html或addeventlistner。
要开始提交，您必须停止阻止默认执行。
您可以通过仅重新调整false来中断forEach循环。不使用休息;与正常循环一样..
我已经把id数组放在哪里你可以把这个论坛会检查的元素名称是否为空。
查找输入法简单地遍历表单元素的子元素，看看他们的id是否已在id数组中被识别。如果是，那么它将该元素添加到输入中，如果在提交之前存在值，则稍后检查该元素。如果没有，则呼叫防止默认。

使用Javascript检查html表单值是否为空

3 个答案: