用Javascript处理表单提交-如何给用户另一个机会？
我当前的应用程序阻止在第一次尝试时提交空白和空输入。如果初始输入有效，则执行搜索。如果无效，表单将变为“无响应”，并且无法进行其他尝试。我如何修改我的代码（理想情况下使用纯JavaScript），以便在不重新加载页面的情况下允许多次尝试用Javascript处理表单提交-如何给用户另一个机会？,javascript,ruby-on-rails,forms,event-handling,ruby-on-rails-5,Javascript,Ruby On Rails,Forms,Event Handling,Ruby On Rails 5,我当前的应用程序阻止在第一次尝试时提交空白和空输入。如果初始输入有效，则执行搜索。如果无效，表单将变为“无响应”，并且无法进行其他尝试。我如何修改我的代码（理想情况下使用纯JavaScript），以便在不重新加载页面的情况下允许多次尝试 // welcome.js function prepareEventHandlers() { document.getElementById("new_search").onsubmit = validateForm } function vali
// welcome.js
function prepareEventHandlers() {
document.getElementById("new_search").onsubmit = validateForm
}
function validateForm() {
var q = document.getElementById("search_q").value;
var trimmed_q = q.trim();
if (trimmed_q.length < 1) {
return false;
} else {
return true;
}
}
window.onload = function() {
prepareEventHandlers();
}
// segment from home.html.erb
<%= form_for :search, url: {action: "results"}, html: {id: "new_search", method: "get"} do |f| %>
<%= f.text_field :q, placeholder: "Where to?", html: {id: "search_q"} %>
<%= f.submit "Search" %>
<% end %>
// rails generated html for home.html.erb -- omitted 30 lines of scripts from head
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<script src="welcome.js" type="text/javascript" charset="utf-8">
</script>
</head>
</head>
<body>
<div class="homeheader">
</div>
<div class="searchbar">
<h3 class="col-md-2"></h3>
<h3 class="col-md-10">
<form id="new_search" action="/results" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓" />
<input placeholder="Where to?" html="{:id=>"search_q"}" type="text" name="search[q]" id="search_q" />
<input type="submit" name="commit" value="Search" data-disable-with="Search" />
</form></h3>
</div>
</div>
</body>
</html>
</body>
</html>
//welcome.js
函数prepareEventHandlers（）{
document.getElementById（“新搜索”）.onsubmit=validateForm
}
函数validateForm（）{
var q=document.getElementById（“search_q”）.value；
var trim_q=q.trim（）；
如果（修剪长度<1）{
返回false；
}否则{
返回true；
}
}
window.onload=函数（）{
准备好所有文件（）；
}
//home.html.erb中的段
//rails为home.html.erb生成了html——从head中省略了30行脚本
。在循环中，如果任何字段无效，它会将allValid
标志设置为false，在退出循环并评估该标志是否为false时，它会重置表单。希望这有帮助
此代码将检查表单的每个字段，以确保每个元素中至少有1个字符，只要它不是复选框或单选按钮。如果您认为合适，请随意混合搭配。在循环中，如果任何字段无效，它会将allValid
标志设置为false，在退出循环并评估该标志是否为false时，它会重置表单。希望这有帮助 我发现问题在于，在提交时，提交类型的输入被赋予了禁用选项，在验证数据后，该选项不会重置。我的代码仍在处理中，但以下是我尚未解决的问题：
// welcome.js
function prepareEventHandler() {
document.getElementById("new_search").onsubmit = validateForm
}
function validateForm() {
var q = document.getElementById("search_q").value;
var trimmed_q = q.trim();
if (trimmed_q.length < 1) {
return false;
} else {
return true;
}
}
window.onload = function() {
prepareEventHandler();
}
// (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){
document.getElementsByName("commit")[0].setAttribute("disabled", "true");
document.getElementById("search_q").onkeyup = function() {
var val = document.getElementById("search_q").value;
var trimmed_q = val.trim();
if(trimmed_q != '') {
document.getElementsByName("commit")[0].removeAttribute("disabled");
}
};
}, false);
//welcome.js
函数prepareEventHandler（）{
document.getElementById（“新搜索”）.onsubmit=validateForm
}
函数validateForm（）{
var q=document.getElementById（“search_q”）.value；
var trim_q=q.trim（）；
如果（修剪长度<1）{
返回false；
}否则{
返回true；
}
}
window.onload=函数（）{
prepareEventHandler（）；
}
//（在较旧的IEs中不起作用）
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementsByName（“提交”）[0].setAttribute（“已禁用”、“为真”）；
document.getElementById（“search_q”）.onkeyup=function（）{
var val=document.getElementById（“search_q”）.value；
var trim_q=val.trim（）；
如果（修剪的_q！=''）{
document.getElementsByName（“提交”）[0]。removeAttribute（“已禁用”）；
}
};
}，假）；
我发现问题在于提交时，类型为submit的输入被赋予了禁用选项，并且在验证数据后，该选项不会重置。我的代码仍在处理中，但以下是我尚未解决的问题：
// welcome.js
function prepareEventHandler() {
document.getElementById("new_search").onsubmit = validateForm
}
function validateForm() {
var q = document.getElementById("search_q").value;
var trimmed_q = q.trim();
if (trimmed_q.length < 1) {
return false;
} else {
return true;
}
}
window.onload = function() {
prepareEventHandler();
}
// (doesn't work in older IEs)
document.addEventListener('DOMContentLoaded', function(){
document.getElementsByName("commit")[0].setAttribute("disabled", "true");
document.getElementById("search_q").onkeyup = function() {
var val = document.getElementById("search_q").value;
var trimmed_q = val.trim();
if(trimmed_q != '') {
document.getElementsByName("commit")[0].removeAttribute("disabled");
}
};
}, false);
//welcome.js
函数prepareEventHandler（）{
document.getElementById（“新搜索”）.onsubmit=validateForm
}
函数validateForm（）{
var q=document.getElementById（“search_q”）.value；
var trim_q=q.trim（）；
如果（修剪长度<1）{
返回false；
}否则{
返回true；
}
}
window.onload=函数（）{
prepareEventHandler（）；
}
//（在较旧的IEs中不起作用）
document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementsByName（“提交”）[0].setAttribute（“已禁用”、“为真”）；
document.getElementById（“search_q”）.onkeyup=function（）{
var val=document.getElementById（“search_q”）.value；
var trim_q=val.trim（）；
如果（修剪的_q！=''）{
document.getElementsByName（“提交”）[0]。removeAttribute（“已禁用”）；
}
};
}，假）；
什么使输入无效？可能会捕获所有这些异常，就像你已经捕捉到空的和空的异常一样？？你可以运行你的应用程序，然后在这里张贴完整的HTML代码？？（通过浏览器的“查看页面源”），为我当前的应用程序的目的，“无效”输入是任何空的输入或输入包含所有空白。我目前不打算执行任何其他检查，只是为了启用多次提交尝试。您是否还可以包括welcome.js？我无法用您提供的代码复制您的问题（对其进行一些调试），而且您的HTML标记中有多个HTML标记，我认为这是错误的。我们还有多个与表单提交相关的问题，请尝试阅读这些问题并更新您的代码。。。什么使输入无效？可能会捕获所有这些异常，就像你已经捕捉到空的和空的异常一样？？你可以运行你的应用程序，然后在这里张贴完整的HTML代码？？（通过浏览器的“查看页面源”），为我当前的应用程序的目的，“无效”输入是任何空的输入或输入包含所有空白。我目前不打算执行任何其他检查，只是为了启用多次提交尝试。您是否还可以包括welcome.js？我无法用您提供的代码复制您的问题（对其进行一些调试），而且您的HTML标记中有多个HTML标记，我认为这是错误的。我们还有多个与表单提交相关的问题，请尝试阅读这些问题并更新您的代码。。。谢谢你的反馈。多次尝试的诀窍是，我需要找到一种方法在提交时设置disable属性之后删除它。我相信由于rails生成的数据disable with attribute，disabled属性在提交后会出现。感谢您的反馈。多次尝试的诀窍是，我需要找到一种方法在提交时设置disable属性之后删除它。我相信禁用属性应用程序