使用Javascript处理表单提交 - 如何给用户另一个机会？

我目前的应用程序可以防止在第一次尝试时提交空白和空白输入。如果初始输入有效，则执行搜索。如果它无效，表单将变为“无响应”，并且不能进行其他尝试。如何修改我的代码，理想情况下使用普通JavaScript，允许多次尝试而不重新加载页面？使用Javascript处理表单提交 - 如何给用户另一个机会？

// 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="&#x2713;" /> 
     <input placeholder="Where to?" html="{:id=&gt;&quot;search_q&quot;}" 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>

来源

2016-11-21 MJuliet

什么使输入无效？也许赶上所有这些例外，就像你已经捕获了空白和空的异常？ –

你可以运行你的应用程序，然后在这里发布完整的html代码??（通过浏览器的“查看页面源代码”） –

为了我当前的应用程序的目的，“无效”输入是任何空白输入或包含全部空白的输入。我目前不想执行任何其他检查，只是为了启用多次提交尝试。 – MJuliet

function validateForm(f) { 
    var ele = document.forms[f].elements; 
    var allValid = true; 
    for (var i in ele) { 
     if (!isChar(ele[i]) && ele[i].type!="radio" && ele[i].type!="checkbox") { 
      allValid = false; 
      ele[i].style.borderColor = "red"; 
     } 
    } 
    if (!allValid) { 
     f.reset() 
    } 
}

该代码会检查你的表单的各个领域，以确保至少有1个字符中的每个元素，只要它不是一个复选框或单选按钮。如果您认为合适，请随意混合并匹配if声明。在循环中，如果任何字段无效，则将allValid标志设置为false，并在退出循环并评估该标志为false时重置您的表单。希望这可以帮助！

来源

2016-11-21 14:15:24 dave

感谢您的反馈。多次尝试的技巧是，我需要找到一种方法，在提交时设置disable属性。我相信由于rails生成的data-disable-with属性而在提交后出现disabled属性。 – MJuliet

我发现问题是提交时，类型提交的输入被赋予了禁用选项，这是验证数据后没有重置的内容。我的代码仍在处理中，但这里是我的DRY解决方案：

// 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);

来源

2016-11-22 02:57:15 MJuliet

使用Javascript处理表单提交 - 如何给用户另一个机会？

回答

相关问题