如果文本字段值设置为特定值或空白，如何禁用表单提交按钮？

Question

我使用 Google Docs 创建了一个表单，它将数据发送到 Google 电子表格。我采用了 html 代码并将其重新格式化为我的 css/style 并且它运行良好。它还显示一个自定义的感谢页面，我面临的唯一问题是它不验证数据。

所以，我正在考虑如果用户没有在必填字段中输入任何内容，则禁用提交按钮。或者，您可以建议一种方法来防止提交空白表单？

目前我的表单有 2 个文本字段，和 4 个复选框。我需要两个文本字段，但不需要复选框。文本字段当前使用 html/script 填充/清除：

value="Your Email or Phone No."
onfocus="if (this.value=='Your Email or Phone No.') this.value='';"

如果没有输入数据，我需要我的表单禁用提交按钮。

这是我的完整代码：

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thankyou.htm';}"></iframe>
<form action="Google_Form_ID_Here_(removed-for-stackoverflow-post)" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<ol style="padding-left: 0">


<div dir="ltr"><label for="entry_145">Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.145" value="Enter Full Name" id="entry_145" dir="auto" aria-required="true" onfocus="if (this.value=='Enter Full Name') this.value='';">
</div>



<div dir="ltr" ><label for="entry_624">Contact Info &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.624" value="Your Email or Phone No." id="entry_624" dir="auto" aria-required="true" onfocus="if (this.value=='Your Email or Phone No.') this.value='';">
</div>


<div align="center">
<div dir="ltr"><label for="entry_755"><br>Checkboxes
</div><br>
<div dir="ltr">Check which of the functions you&#39;ll be attending.</label><br><br>


<table align="center" width="248" height="128" border="0">

  <span>
  <tr>
  <td align="center"><input id="group_418_1" name="entry.418" type="checkbox" value="Event 1"/>
                <label class="vis_hide">Event 1</label></td>
    <td align="center"><input id="group_418_2" name="entry.418" type="checkbox" value="Event 2"/>
                 <label class="vis_hide">Event 2</label></td>
    <td align="center"><input id="group_418_3" name="entry.418" type="checkbox" value="Event 3"/>
                <label class="vis_hide">Event 3</label></td>
    <td align="center"><input id="group_418_4" name="entry.418" type="checkbox" value="Event 4"/>
                <label class="vis_hide">Event 4</label></td>
  </tr>
  </span>
</table>



<input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">


<div dir="ltr">
<input type="submit" name="submit" value="Confirm" class="sbutton">
</div></ol></form>

请问有人可以提供这方面的帮助吗？或者建议替代方案以防止空白提交或提供解决方案的链接？ 这也可以用一些 jquery 脚本来完成吗？

感谢您的帮助。

编辑：

我试过这个脚本，但也没有用...

<script>
$(function () {
// give the <form> the ID "myform" (or whatever you want) before using this code!
var form = $("#myform");

var input1 = $("#entry_145"); //for name
var input2 = $("#entry_624"); //for contact


form.addEventListener("submit", function (evt) {
if (input1.val() == "" || input2.val() == "") {
evt.preventDefault();
}
}, false);
});
</script>

Answer 1

用还是不用，脏代码

<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="name" />
<input type="text" class="req" id="post" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>

<script>
$(function (){
$('.req').change(function(){
    if ($('#name').val() == '' || $('#post').val() == '')
        {
            $('#button').attr('disabled',true);
        }
    else
        {
            $('#button').attr('disabled',false);
        }
});
});
</script>

Answer 2

客户端“验证”有两种方式：

• 使用 JavaScript 并将 submit 事件侦听器添加到您的 <form> 标记。

• 将required 属性添加到您的文本框中：

  <input type="text" required="required" />
  

但这些不会阻止使用旧浏览器的用户（使用第二个选项时）或精通计算机的人只需手动发送表单。

您也必须执行服务器端验证！

---

试试这个change 事件监听器：

$(function () {
  // give the <form> the ID "myform" (or whatever you want) before using this code!
  var form = $("#myform");

  var input1 = $("#my-input1-name");
  var input2 = $("#my-input2-name");


  form.submit(function (evt) {
    if (input1.val() == "" || input2.val() == "") {
      evt.preventDefault();
    }
  });
});