ある条件での必須入力について

質問

いつもお世話になっております。

ある条件が適用されると、指定の項目を必須入力にしたいのですが、
やり方が全くわかりません。

検索してみましたが、全く引っかからないので、ご質問させていただきます。

やりたいこととしましては、
「対応状況」の項目が「対応済」になったら、
「対応完了日時」を必須入力にしたいのです。

「対応状況は」、「対応中」と「対応済」があり、どちらかを選択して、
submitします。
「対応状況」が、「対応中」の場合は、submitを行っても、
「対応完了日時」は必須入力にはしません。

「対応状況」が、「対応済」になって、submitした際は、
「対応完了日時」を必須入力として、入力されてない場合は、エラーを出したいです。

クライアント側は、html、javascliptにて行っています。

ソース等は、全く思いつかないので、記載できません。

全て人任せで申し訳ありませんが、
ご存知の方がいらっしゃいましたら、ご教授いただけないでしょうか。

よろしくお願いいたします。

回答No.3

Ogre7077 · ベストアンサー

No.2 の補足に対して

属性 required を使っているので、HTML5 で回答します

アレ = ある条件、の対象となるタグ
コレ = 指定の項目、のタグ
とすれば、
var form = document.forms[アレとコレを含むフォームのname]
form.elements[アレのname].addEventListener('change', createHandler(条件を満たすアレのvalue, コレのname), false);

なので、
var form = document.forms['form01']
form.elements['jyoukyou'].addEventListener('change', createHandler('対応済', 'syuuryoubi'), false);

それはそうと
誤: <option value="..."/> ... </option>
正: <option value="..."> ... </option>

お礼

再度ご回答ありがとうございます。

非常に勉強になりました。

補足に記載していただいた内容で、バッチリできました。

お忙しい中ご回答いただき、ありがとうございました。

回答No.2

Ogre7077

最近のブラウザなら - HTML5 の場合

<script>window.addEventListener('DOMContentLoaded', function(ev){
var form = document.forms['alpha'];
function createHandler(value, reqName) {
return function(ev){form.elements[reqName].required = (ev.target.value == value)};
}
form.elements['ca'].addEventListener('change', createHandler('x', 'cb'), false);
form.elements['sa'].addEventListener('change', createHandler('b', 'sb'), false);
}, false)</script>
<form name=alpha action=confirm.html><ul>
<li> <input name=ta type=text required>
<li> <input name=ca type=checkbox value=x> <input name=cb type=text>
<li> <select name=sa><option value=a>対応中<option value=b>対応済</select> <input name=sb type=text>
<li> <button type=submit>ok</button>
</ul></form>

古いブラウザも考慮するなら - jQuery の場合
以下を利用します
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js

<script src="jquery.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script>$(function(){
var form = $('form[name="beta"]');
form.validate({ rules:{
'ta': 'required',
'cb': { required:{ depends:function(){return form.find('*[name="ca"]').is(':checked')} } },
'sb': { required:{ depends:function(){return form.find('*[name="sa"]').val() == 'b'} } }
} });
})</script>
<style>label.error { color:red; font-weight:bold; }</style>
<form name=beta action=confirm.html><ul>
<li> <input name=ta type=text >
<li> <input name=ca type=checkbox value=x> <input name=cb type=text>
<li> <select name=sa><option value=a>対応中<option value=b>対応済</select> <input name=sb type=text>
<li> <button type=submit>ok</button>
</ul></form>

補足

コードを見させていただいたのですが、理解できているようなできないような気がします。

実際のform部分はこのようになっています。

<form action = "sagyoutouroku.asp" method="POST" name="form01">

<input type="text" name="syuuryoubi"id="syuuryoubi" style="width:100%" rows=1 class="textbox" value="<%=Rs("作業終了日")%>">

<select name="jyoukyou" id="jyoukyou" required>
<option value=""/>---対応情報選択---</option>
<option value="対応中"/>対応中</option>
<option value="対応済"/>対応済</option>
</select>

<input type="submit" value="作業内容登録">

</form>

このような場合は、コードはどうなりますでしょうか。
ほんとに他人任せですいません。

回答No.1

めとろいと（@naktak）

いっぱい出てきますよ。

http://www.tagindex.com/javascript/form/check6.html
http://www.red.oit-net.jp/tatsuya/java/Fblink.htm
http://www.pori2.net/js/kihon/4.html
http://itmemo.net-luck.com/javascript-button-submit/

お礼

ご回答ありがとうございます。

調べると出てくるものですね。
私の調べ方が悪かったんだと思います。

教えていただいたURLを見て、勉強します。

ありがとうございました。