2015年4月29日

表單驗證:判斷網友有無填寫資料,沒有則不傳送表單


這篇文章會說明如何透過jQuery和JavaScript來做網友有無填寫資料的簡單判斷,沒有的話游標會自動跳到尚未填寫的核取方框,並且不送出表單。

jQuery
eval( )執行(execute)或評估(evaluate)。
.submit( ):將表單送出

HTML語法撰寫

我們透過HTML寫出一個像這樣的表單


語法是這樣:
<body>
<form id="form1" name="form1" method="post" action="" onclick="return false">
  <p>姓名:
    <input type="text" name="name" id="name" />
  </p>
  <p>電話:
    <input type="text" name="phone" id="phone" />
  </p>
  <p>地址:
    <input type="text" name="address" id="address" />
  </p>
  <p>
    <input type="submit" name="button" id="button" value="送出" />
  </p>
</form>
</body>
這裡有一個特別需要注意的地方,就是在<form>的裡面我們多了一個指令,是onclick="return false",這是一個javascript的語法,意思是點擊送出的時候「不要送出」,那什麼時候才要送出呢?就要搭配上我們jQuery/javascript的語法了。

jQuery語法
<script>
 $(document).ready(function(){
    $("#button").click(function(){
        if($("#name").val()==""){
            alert("你尚未填寫姓名");
            eval("document.form1['name'].focus()");       
        }else if($("#phone").val()==""){
            alert("你尚未填寫電話");
            eval("document.form1['phone'].focus()");    
        }else if($("#address").val()==""){
            alert("你尚未填寫地址");
            eval("document.form1['address'].focus()");       
        }else{
            document.form1.submit();
        }
    })
 })
</script>
這裡會依序檢驗各個文字框填寫的狀況,一開始一樣是當「送出」(#button)被點擊的時候,如果我填寫姓名的文字框(#name)的值.val( )是空白的,則:
1.提醒尚未填寫的項目
2.把未填寫的文字框變成focus的狀態(游標移到的樣子)
這裡有一個關鍵字是eval( ),這個在這裡的意思是幫我執行( )內的項目,而括弧內就是找到該對話框(例如,document.form1['name']),然後讓它變成focus的狀態.focus( )。其他的就是繼續會else if的指令寫下去。

最後,如果都正確的話,就幫我把表單(document.form1)送出.submit( )

參考資料

0 意見:

張貼留言