iT邦幫忙

1

[js] 輸出時判別輸入框未輸入資料

各位大大好:

想請問我將
1.收據抬頭,若填其他會跑出一個輸出框填寫資料
2.參訪,若參加參訪1或參訪2,會跑出兩個輸入框填寫身分證跟出生年月日
3.送出確認後,若填其他填寫完框,但身分證或出生年月日未填還是可以照樣送出,但是我有寫判別式,"若有參訪卻沒填身分證資料",應該不能送出,但不知道為什麼還是可以照樣送出,想請問是甚麼問題呢?
謝謝

html


<div class="form-group col-md-6 " >
    <label for="recipient-name" class="col-form-label" >職稱:</label>
    <input type="text" class="form-control" id="career" name="career" autocomplete="off" placeholder="職稱" />
    </div>

<label for="recipient-name" class="col-form-label" >收據抬頭:</label>
     
     <div class="form-check form-check-inline rec">
     <input class="form-check-input" type="radio" name="rec" id="rec" value="company" checked/>
     <label class="form-check-label" for="inlineRadio1">同服務單位</label>
     </div>
        
      <div class="form-check form-check-inline rec">
     <input class="form-check-input" type="radio" name="rec" id="rec" value="other"/>
     <label class="form-check-label" for="inlineRadio2">其他</label>
     <input type="text" class="form-control" id="recother" name="recother" autocomplete="off"  placeholder="請填寫收據抬頭"  />
            </div>


 <div class="form-group col-md-12 "><h>9月6日(星期五)會後參訪(免費自由參加),請任選一項</h><br/>
           
           <div class="form-check form-check-inline visit1">
     <input class="form-check-input" type="radio" name="visit" id="visit" value="none" checked/>
      <label class="form-check-label" for="inlineRadio1">兩活動皆不參加</label>
        </div>
        
       <div class="form-check form-check-inline visit1">
     <input class="form-check-input" type="radio" name="visit" id="visit" value="sea"/>
     <label class="form-check-label" for="inlineRadio2">參訪1</label>
       </div>
       
       <div class="form-check form-check-inline visit1">
     <input class="form-check-input" type="radio" name="visit" id="visit" value="tpc"/>
     <label class="form-check-label" for="inlineRadio2">參訪2</label>
       </div></div>
       
 <div class="form-group col-md-6 " >
    <label for="recipient-name" class="col-form-label" id="idnumt" >身分證字號:</label>
    <input type="text" class="form-control" id="idnum" name="idnum" autocomplete="off" placeholder="身分證字號" />
    </div> 


<div class="form-group col-md-6 " >
    <label for="recipient-name" class="col-form-label"id="bookdatet" >出生西元年月日:</label>
    <input type="date"  class="form-control" id="bookdate" placeholder="2014-09-18">
    </div> 
    
<div class="btn-toolbar">
   <button type="submit" id="btnSubmit" class="btn btn-primary btn-sm">確定報名</button>
  <button type="reset" id="btnreset" class="btn btn-primary btn-sm">重新設定</button></div>

js

$(document).ready(function() {
 if (window.location.href!="http://www.ee.nsysu.edu.tw/pr2019/a.php"){

  $( "#content" ).hide();
 }
 
 
  $("#recother").hide();
 $('.rec').click(function(){
 
  

            if($('input[name=rec]:checked').val()=="company"){
                 $("#recother").hide();
              
            }
            if($('input[name=rec]:checked').val()=="other"){
                $("#recother").show();
                           }

        });
        
        
         $("#idnum").hide();
   $("#bookdate").hide();
   $("#idnumt").hide();
  $("#bookdatet").hide();
    $('.visit1').click(function(){
 
        

       if($('input[name=visit]:checked').val()!="none"){
                 $("#idnum").show();
                                   $("#bookdate").show();
                                   $("#idnumt").show();
                                    $("#bookdatet").show();

              
            }
                   else{
                   
               $("#idnum").hide();
                               $("#bookdate").hide();
                               $("#idnumt").hide();
                                 $("#bookdatet").hide();
 
                   }
        });

 
  
});

$("#btnSubmit").on('click',function(e){
if($("#id").val()==""){
 $("#id").css ("border", '1px solid red');
 alert("學號未填");
 e.preventDefault();
 
 }
  
    else if($("#career").val()==""){
   $("#career").css ("border", '1px solid red');
 alert("職稱未填")
 e.preventDefault();
 }
  
  else if ($('input[name=rec]:checked').val()=="other") 
  {
   if($("#recother").val()==""){
  $("#recother").css ("border", '1px solid red');
 alert("收據抬頭未填")
 e.preventDefault();
 }
 }
  else if ($('input[name=visit]:checked').val()!="none") 
  {
 if($("#idnum").val()==""){
 $("#idnum").css ("border", '1px solid red');
 alert("身分證未填")
 e.preventDefault();
 }
 }
});

2 個回答

2
小魚
iT邦大師 1 級 ‧ 2019-05-07 17:07:13
最佳解答

用return false;可以嗎?
因為你那個按鈕是submit,

或是另外一種用法,
使用普通按鈕,
但是所有條件都沒問題的話,
用js的submit()送出資料.

看更多先前的回應...收起先前的回應...
mayyola iT邦新手 2 級 ‧ 2019-05-07 18:22:39 檢舉

小魚您好:
是哪邊要改return false呢?

小魚 iT邦大師 1 級 ‧ 2019-05-07 19:03:55 檢舉

你是希望如果判斷有誤就不要submit是嗎?
那就在不要submit的地方return false;
如果return false還是沒有效果,
就用第二種方式吧...

小魚 iT邦大師 1 級 ‧ 2019-05-07 19:04:59 檢舉

看了一下筆記應該是類似這樣

$('form').submit(function(e){
    return false; // 傳回true就會submit,傳回false就表示不作submit
});

如果寫在onclick裡面印象中好像return false可能會沒有用

mayyola iT邦新手 2 級 ‧ 2019-05-07 22:27:12 檢舉

謝謝小魚~

1
dragonH
iT邦大師 1 級 ‧ 2019-05-07 17:23:32

CodePen

我測是有跳出 "輸入身分證"的 alert阿

你是指跳出alert 還是照樣送出嗎

不過你用type = "submit" 卻沒有用 form tag

這樣有用嗎/images/emoticon/emoticon70.gif

還有我建議先用input 的 'required' Attribute 先檢查一次

在 Submit 前 再用js檢查一次

最後到後端再檢查一次

看更多先前的回應...收起先前的回應...
小魚 iT邦大師 1 級 ‧ 2019-05-07 17:37:24 檢舉

也許他只是沒有貼出 form tag 而已...

mayyola iT邦新手 2 級 ‧ 2019-05-07 17:37:46 檢舉

form tag 我沒寫上去..為什麼d大把js 判別的註解掉還是可以顯示壓?

dragonH iT邦大師 1 級 ‧ 2019-05-07 17:40:30 檢舉

我把那段注解只是為了要讓 required 的效果出來而已
測試得時候沒注解唷

mayyola iT邦新手 2 級 ‧ 2019-05-07 18:23:40 檢舉

我是寫完其他,身分證沒寫還是會通過@@

dragonH iT邦大師 1 級 ‧ 2019-05-07 18:50:40 檢舉

你最後這邊 if($("#idnumt").val()=="") id打錯了

難怪就算身分證有打還是一直跳出alert

dragonH iT邦大師 1 級 ‧ 2019-05-07 19:09:30 檢舉

codePen 我更新可以參考一下

身分證的id打錯了

然後你應該 listen 的是 form submit的event

不是button click 的 event

mayyola iT邦新手 2 級 ‧ 2019-05-07 21:18:34 檢舉

d大您好:

就是剛剛如果點其他寫入抬頭、職稱也填了、點參訪1或點參訪2
身分證跑出來,但沒填,按送出無法跑出alert..會自動跳下一頁

dragonH iT邦大師 1 級 ‧ 2019-05-07 21:47:31 檢舉

改好了 判斷邏輯的問題

因為($('input[name=rec]:checked').val() == "other")

選了其他會符合這的條件

導致後面的身分證判斷不會執行到

mayyola iT邦新手 2 級 ‧ 2019-05-07 21:59:32 檢舉

d大您好:可以用了 謝謝

主要是改if跟return false;嗎? 這跟==(判別的變數做轉換型別的動作)和===有關係嗎?

dragonH iT邦大師 1 級 ‧ 2019-05-07 22:13:13 檢舉

if 要改是因為你的檢查不是 else 的關係

一旦檢查失敗就不submit


return false 是讓code不再執行下去

e.preventDefault(); 是防止element默認行為

兩個在這都可以達到取消submit的目的

不過我會用return false

因為e.preventDefault()不會中斷code

所以你抬頭 身分證都沒填

會跳兩次alert


== 跟 === 的差別在於

===會比較兩者type

ex:

false == '0' // true
false === '0' // false

所以會比較推薦用=== (否定也是推薦用!==)

mayyola iT邦新手 2 級 ‧ 2019-05-07 22:26:57 檢舉

所以應該是e.preventDefault(); 是防止element默認行為的關係囉@@
謝謝

dragonH iT邦大師 1 級 ‧ 2019-05-07 22:28:53 檢舉

你這案例用哪個都沒差

重點是if那邊要修改

我要發表回答

立即登入回答