Q&A
ソースの提示お願いします
フォーム内にSUBMITボタンを2つ実装しています、
「申請する」を押した場合、バリデーションチェックを実行
「一時保存」を押した場合、バリデーションチェックは実行せずに次処理へ
としたいのですが、うまく行きません。ご教示お願い致します。
宜しくお願い致します。
<script>
$('form').on('submit',function(){
let submit_val = $(this).find('input[type=submit]').val();
if(submit_val = '申請する'){ //申請するボタンを押したらバリデーションチェック実行
$('#tori_form').validationEngine();
}else{
return false; //何も操作しない
}
})
</script>
******
<form action='tori_up.php' name='tori_form' id='tori_form' method='POST' enctype='multipart/form-data'>
~~~
<INPUT type='submit' name='toroku' class='toroku' value='申請する'>
<INPUT type='submit' name='save' class='save' value='一時保存'>
~~~
******
「申請する」を押した場合、バリデーションチェックを実行
「一時保存」を押した場合、バリデーションチェックは実行せずに次処理へ
質問に追記してもらっていいですか。
追記致しました。
回答1件
0
ベストアンサー
フォームの操作に対し、submitした値を取得し、Aは実行、Bは実行を阻止すればいいのでは？
同一form内に複数のsubmitが存在する場合はこのように振り分けることが多いです。
追記： 解決したようなので、今後のベンチマークとして解決策を残しておきます。
js
1$(function(){ 2 $(document).on('click','input[type=submit]',function(event){ 3 let submit_val = $(this).val(); 4 if(submit_val == '申請する'){ 5 //申請するボタンを押したらバリデーションチェック実行 6 $('#tori_form').validationEngine(); 7 }else{ 8 event.preventDefault; //何も操作せずに転送 9 } 10 }) 11}) 12 13 14
投稿2020/12/09 02:44
編集2020/12/10 04:38総合スコア3633
ご回答ありがとうございます。状況変わりませんでした。
<script>
$('form').on('submit',function(){
let submit_val = $(this).find('input[type=submit]').val();
if(submit_val = '申請する'){ //申請するボタンを押したらバリデーションチェック実行
$('#form').validationEngine();
}else{
return false; //何も操作しない
}
})
</script>
~~~~
<INPUT type='submit' name='toroku' class='btm' value='申請する'>
nameの値は同じにした方がいいですね。あと分岐はうまくいってますか？
バリデーションチェックは置いておいてですが、submit後の処理でsubmitのname属性で分岐させたいです。name属性を同じ名前にしてもそれは可能でしょうか
nameは同じ名前にしてvalueの値を変えて分岐するようにした方が、むしろいいです。
nameを同じにしましたが、バリデーションチェックが実行されませんでした。分岐がうまくいっていないようです。
アクティブエレメントを取得する方法がぱっと思いつかなかったので、それならフォームよりsubmitボタンで振り分けた方がいいかもしれないので書き換えました。これで分岐は通りますが、バリデーションが通るかはやってみないとなんとも言えません。
バリデーションチェックは通りましたが、「申請する」「一時保存」どちらを押してもバリエーションが入ってしまいます･･･。
分岐はうまくいってますか？
「一時保存」を押してもバリデーションチェックが入ってしまうので、分岐はうまく行っていません。
if文としての分岐がうまくいっているか、まずはそこを確かめてください（間にconsole.logなどを使って）
アラートにて確認しましたが、どちらも「正」を通過しています。
ちょっと修正
submit_val == '申請する' に修正してください。今のままだと必ずtrueを返してしまいます。
ありがとうございます。分岐うまく行きました。しかし、「一時保存」でaction先の「tori_up.php」へ飛ばなくなりました。return falseを削除して試してみましたが、「申請する」でバリデーションチェックに引っかかったあとに「一時保存」を押すとバリデーションチェックが実行されてしまいます（はじめから「一時保存」であれば問題なしですが、運用を考えると「申請する」⇒「一時保存」のパターンも考慮したいです）。
現状、return falseで処理を止めてしまっているので、そこをコメントにしてください
上記記載の通り、コメントアウトも試してみたのですが、「申請する」でバリデーションチェックに引っかかったあとに「一時保存」を押すとバリデーションチェックが実行されてしまいます（はじめから「一時保存」であれば問題なしですが、運用を考えると「申請する」⇒「一時保存」のパターンも考慮したいです）。
preventDefaultでやってみてください。自分の方の簡易テストではうまくいったようですが。
function(event){
//
}else{
event.preventDefault;
}
}
下記でよろしいでしょうか。結果は同じでした。
$(function(event){
$('input[type=submit]').on('click',function(){
let submit_val = $(this).val();
if(submit_val == '申請する'){ //申請するボタンを押したらバリデーションチェック実行
$('#tori_form').validationEngine();
}else{
// return false; //何も操作しない
event.preventDefault();
}
})
})
eventの引数はイベント実行時です。あと、preventDefault;ですね。jQueryのメソッドじゃないので引数不要。
$(function(){
$('input[type=submit]').on('click',function(event){
let submit_val = $(this).val();
if(submit_val == '申請する'){ //申請するボタンを押したらバリデーションチェック実行
$('#tori_form').validationEngine();
}else{
// return false; //何も操作しない
event.preventDefault;
}
})
})
上記で試させて頂きましたが、「申請する」を押してバリデーションチェックに引っかかった直後に、「一時保存」を押すと再度バリデーションチェックが実行されてしまいます（状況変わらずです）。
どのようなソースになっているかもう一度貼り付けてもらっていいですか。こっちはうまくいってますので。
あと、Chromeの開発コンソールでスクリプトにエラーが表示されていないか確認してください。
ソース更新しました。スクリプトエラーも出ておりません。
validationEngineがイベントを保持している可能性が高いですね。ならば、記述方法をこのように書き換えてみてください。これで駄目なら、ちょっと時間を持って要検証しないと無理っぽいです。
```js
$(document).on('click','input[type=submit]',function(event){
```
あと、ひょっとしたらこれも原因にあるかもしれません。
Validation-Engine 特定の場所で発火しないようにする
https://qiita.com/kaori_t/items/fe611399097d2c439918
上記リンク先のように指定したらうまく行きました！実はこのリンク先の情報は見て試していたのですが、その際はうまく行きませんでした。FKMさんにご教示頂いた分岐でうまく行きました。助かりました。ありがとうございます。
あなたの回答
tips
プレビュー
