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

Question

我使用Google文档创建了一个表单，该表单将数据发送到Google电子表格。我已经采取了HTML代码，并将其重新格式化为我的CSS /风格，它完美的作品。它还显示一个自定义谢谢页面，我面临的唯一问题是它不验证数据。

所以，我想禁用提交按钮，如果用户还没有输入任何东西在必填字段。或者，您可以提出一种防止空白表单提交的方法？

当前我的表单有2个文本字段和4个复选框。我需要两个文本字段，但不是复选框。该文本字段是目前人口/与HTML /脚本清除：

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

有两种方法用于客户端 “验证”：

• 使用JavaScript并在您的<form>标记中添加一个submit事件监听器。

• 的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(); 
    } 
    }); 
}); 

Answer 2

使用它或离开它，肮脏的代码

<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>