Question

我正在尝试在网页上强制选择字段。我知道如何在JS和表单属性'onsubmit'的帮助下执行它并返回该函数。但问题是表单代码已经编写，我现在不知道如何添加属性。如果我可以从JS动态追加属性，请告诉我。我试过的另一种方法是在页面加载后调用JS。但这不是强制要求的，可以提交表格。以下是我的代码..

       <!DOCTYPE html>
       <html>
       <head>
       <script>
       function f1()
       {
           var countryValue = document.getElementById('count ID').value;

    if (countryValue == "") 
    {
            alert("field value missing");
        return false;
    }
    var stateValue = document.getElementById('state ID').value;
    if (stateValue == "") 
    {
            alert("state field value missing");
        return false;
    }
}

      </script>
     </head>
     <body>
    <form method = "post" action = "33.html">
    Country: <input type="text" id="count ID">
    state: <select id="state ID"> 
             <option></option>
                     <option value="ap">ap</option> 
                     <option value="bp">bp</option> 
                    </select>
    <br>
    <input type = "submit">
    </form>
    <script>window.onload=f1</script>

            </body>
            </html>

请帮忙。

Answer 1

一旦你有一个功能来检测不正确的值（空的必填字段或其他任何东西，比如一个糟糕的电子邮件地址），你有几个不同的选择：

停用提交按钮
取消按钮上的onclick事件
取消表单上的提交事件

禁用提交按钮可能会让用户烦恼（输入值时可能会闪烁）。

Answer 2

看看这个，因为你弄乱了ID

Live Demo

window.onload=function() {
  document.forms[0].onsubmit=function() { // first form on page
    var countryValue = this.elements[0].value; // first field in form
    if (countryValue == "") {
      alert("Please enter a country");
      return false;
    }
    var stateIdx = this.elements[1].selectedIndex; // second field
    if (stateIdx < 1) { // your first option does not have a value 
      alert("Please select a state");
      return false;
    }
    return true; // allow submission
  }
}

PS：POST到html页面很可能会给你一个错误

获取最后一个按钮进行提交

window.onload=function() {
  var form = document.forms[0]; // first form
  // last element in form:
  form.elements[form.elements.length-1].onclick=function() { 
  ...
  ...
  ...
   this.form.submit(); // instead of return true
  }
}

Answer 3

我有同样的问题，但我做了一个扩展。使用钩子系统在名称中使用＆＃34; *＆＃34;翻译字段，以验证所需的字段。这是一个简单的解决方案，不需要侵入，只需要使用sufix＆＃34; *＆＃34;就可以在数据库中添加字段。在自定义字段的配置。

代码为：https://github.com/voiski/bugzilla-required-field

使用javascript强制字段

3 个答案: