最近、私の頭を悩ませていることがあります。
Spring MVC で Web アプリケーションを構築していますが、一部のフォームには複数の入力タイプが含まれています (例: form:radiobuttons [スプリング ラジオ ボタン]、選択ボックス、テキスト フィールドなど)。私の目標は、jQuery で .hide() および .show() メソッドを使用して、両方のフォームで同じ見出し (「Select a Color」) の下にある ID「msgDiv」の div を非表示/表示することです。私が達成したいのは、両方のフォームに同じ検証機能を使用し、それに応じてカスタムメッセージを表示/非表示にすることです。
注: これは、アプリケーションを変更する前に適切なエラー処理と検証を行うために作成した演習に過ぎないため、この例の色の選択と音楽の愚かさを見落としてください。
コードに！
Form1: "Select Form" (選択ボックスの検証のみ)
HMTL コード スニペット:
<form:form action="FormA" commandName="user" name="myForm" id="myFormSelect">
<input type="hidden" id="color" name="color" value="${requestScope.user.color}" />
<h2>Select a Color</h2>
<div id="msgDiv">
<form:errors path="*" element="span" id="errorMsg" />
<span id="message"/></span><br/><br/>
</div>
<p>Please select a color</p>
<select id="userSelect" name"user" class="selectbox_class" style="max-width: 200px;">
<option value="">--Select One--</option>
<%
Map<String, String> myMap = ( Map<String, String>) session.getAttribute("myMap");
for (String key:myMap.keySet())
{
%> <option value="<%= key %>"><%out.print(key+"</option>");
}
%>
</select>
<br/>
<br/>
<div class="button-panel"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" onClick="selectVal();" id="send" value="send">Submit</button>
<span class="buttons buttons-right"></span>
</div>
</form:form>
Form2: "Select & Radio Form" (選択ボックスとラジオ検証)
HMTL コード スニペット:
<form:form action="FormB" commandName="user" name="mySecondForm" id="mySecondFormSelectAndRadio">
<input type="hidden" id="color" name="color" value="${requestScope.user.color}" />
<h2>Select a Color</h2>
<div id="msgDiv">
<form:errors path="*" element="span" id="errorMsg" />
<span id="message"/></span><br/><br/>
</div>
<p>Please select a color</p>
<select id="userSelect" name"user" class="selectbox_class" style="max-width: 200px;">
<option value="">--Select One--</option>
<%
Map<String, String> myMap = ( Map<String, String>) session.getAttribute("myMap");
for (String key:myMap.keySet())
{
%> <option value="<%= key %>"><%out.print(key+"</option>");
}
%>
</select>
<br/>
<h2>Music Genre</h2>
<p>Please select the button which describes your taste in music</p>
<form:radiobutton path="music" name="radio" id="radio1" value="classicForm"/><label for="radio1">Classical Music</label><br>
<form:radiobutton path="music" name="radio" id="radio2" value="jazzForm"/><label for="radio2">Jazz Music</label><br>
<br>
<div class="button-panel"><span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" onClick="history.back(-1)">Back</button>
<span class="buttons buttons-right"></span>
</div>
<div id="spacer"></div><div id="spacer"></div>
<div class="button-panel">
<div id="spacer"></div>
<span class="buttons buttons-left"></span>
<button type="button" class="buttons buttons-middle" onClick="selectVal();" id="send" value="send">Submit</button><span class="buttons buttons-right"></span>
</div>
これまでのところ、各ページの下部にあるスクリプト セクションは次のとおりです。
$(document).ready(function(){
<% if (myMap != null) {%>
$('select[name=userSelect]').change(function() {
var selVal = $(this).val();
var txtVal = $("#userSelect option:selected").text();
$("#color").val(txtVal);
});
$('select[name=userSelect]').val($("#color").val());
<%} else { %>
$("#color").val("${user.color}");
<%} %>
});
$(document).ready(function(selectVal) {
if ($("#userSelect").val()=="")
$("#msgDiv").show();
return dataValid;
});
これまでのところ、私の外部 javascipt ファイルは次のとおりです。
function submitForm(formId)
{
document.getElementById(formId).submit();
}
function selectVal() {
var dataValid = true;
var selector = document.getElementById("userSelect");
var radios = $("input[name=radio]");
var message= document.getElementById("message");
var errorMsg = "";
message.innerHTML = "";
if (selector.value == "" || radios.checked == false) {
$('#msgDiv').hide();
dataValid = false;
if (selector.value == "") {
errorMsg += "Please Select an Color from the Drop Down Menu";
}
if (radios.checked == false) {
errorMsg += "Please select a Genre of Music";
}
message.innerHTML = errorMsg;
}
return dataValid;
}
要件：
- ページの読み込み時にも検証が完了しない限り、Div は非表示のままにする必要があります
- 適切なエラー メッセージが表示されるはずです
- ユーザーが色や音楽のジャンルを選択せずに送信をクリックすると、結合されたメッセージが表示されます。
また、参考までに同様のスレッドがあります。 検証のためのelse ifステートメント。
ありがとう！！