4

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

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>

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

4

3 回答 3

8

添加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>
于 2013-09-05T16:27:56.950 回答
3

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

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

小提琴。

于 2013-09-05T15:40:45.957 回答
1

演示：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 数组中被提及。如果是，则将该元素添加到输入中，稍后在提交之前检查其中是否有值。如果没有，它会调用防止默认值。
于 2013-09-05T16:31:43.977 回答