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属性が設定された後にそれを削除する方法を見つける必要があるということでした。レールがdata-disable-with属性を生成した結果として送信された後、無効な属性が表示されると思います。 – 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でのフォーム提出の処理 - ユーザーに別のチャンスを与える方法？

答えて

関連する問題