Question

我使用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                        <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              <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'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();
    }
  });
});

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

2 个答案: