JavaScript來檢查空的表單元素，拒絕提交如果空，發送提醒消息

Question

所以我一直在四處看看代碼，看看有什麼可以通過JavaScript。我有一個代碼，目前正在檢查一個表單是否有空元素，並拒絕提交它是否爲空。事情是我試圖添加一個警報，如果元素是空的，並提示如果元素不是空的，但它不起作用。我似乎沒有足夠的瞭解Java腳本來編輯它。

這裏是表格。忽略奇怪的類和div名稱，它們是以這種方式設置的，因爲表單提交給Google文檔電子表格。

<form class="quickemailform" action="https://docs.google.com/spreadsheet/formResponse?formkey=dGp3YUxCTGtWd251ZXVfOEtwc1hhWVE6MQ&amp;ifq" method="post" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form" name="frm1" onsubmit="InputChecker()"> 
     <br> 
     <div class="errorbox-good"> 
      <div class="ss-item ss-item-required ss-text"> 
       <div class="ss-form-entry"> 
        <label class="ss-q-title" for="entry_0"> 
        <font class="formtitles">FULL NAME:</font> 
        </br> 
        <label class="ss-q-help" for="entry_0"></label> 
        <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42"> 
       </div> 
      </div> 
     </div> 
     <div class="errorbox-good"> 
      <div class="ss-item ss-item-required ss-text"> 
       <div class="ss-form-entry"> 
        <label class="ss-q-title" for="entry_1"> 
         <font class="formtitles" id="compnam">COMPANY NAME:</font> 
         </br> 
        <label class="ss-q-help" for="entry_1"></label> 
        <input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42"> 
       </div> 
      </div> 
     </div> 
     <div class="errorbox-good"> 
      <div class="ss-item ss-item-required ss-text"> 
       <div class="ss-form-entry"> 
        <label class="ss-q-title" for="entry_2"> 
         <font class="formtitles" id="emailadd">EMAIL ADDRESS:</font> 
         <br> 
        <label class="ss-q-help" for="entry_2"></label> 
        <input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42"> 
       </div> 
      </div> 
     </div> 
     <div class="errorbox-good"> 
      <div class="ss-item ss-item-required ss-paragraph-text"> 
       <div class="ss-form-entry"> 
        <label class="ss-q-title" for="entry_3"> 
         <font class="formtitles" id="request">Your Request:</font> 
         <font class="fineprint">(SUMMARIZE IMPORTANT DETAILS)</font> 
         <br> 
        </label> 
        <label class="ss-q-help" for="entry_3"></label> 
        <textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea> 
       </div> 
      </div> 
     </div> 
      <input type="hidden" name="pageNumber" value="0"> 
      <input type="hidden" name="backupCache" value=""> 

     <div class="ss-item ss-navigate"><div class="ss-form-entry"> 
       <input class="submitbuttons" type="submit" name="submit" value="&nbsp;" src="" border="0" onclick="myFunction()" /> 
      </div> 
     </div> 
    </form> 

這裏是JavaScript拒絕提交的表單，如果任何字段爲空。我在網上獲得了這個代碼，我沒有自己寫。它已經過測試和運作，但我希望它不僅僅是拒絕提交。

<script type="text/javascript"> 

       (function() { 
     var divs = document.getElementById('ss-form'). 
     getElementsByTagName('div'); 
     var numDivs = divs.length; 
     for (var j = 0; j < numDivs; j++) { 
     if (divs[j].className == 'errorbox-bad') { 
     divs[j].lastChild.firstChild.lastChild.focus(); 
     return; 
     } 
     } 
     for (var i = 0; i < numDivs; i++) { 
     var div = divs[i]; 
     if (div.className == 'ss-form-entry' && 
     div.firstChild && 
     div.firstChild.className == 'ss-q-title') { 
     div.lastChild.focus(); 
     return; 
     } 
     } 
     })(); 
    </script> 

如果可能的話，我想知道我怎麼能當窗體被拒絕或接受添加提醒。此外，如果表單被拒絕，我想擁有它讓我有類似

<font class="asterick" div="your_name_ast">*</font> or <font class="asterick" div="company_name_ast">*</font> 

，並有asterick旁顯示的每個空元素如果窗體否認沒有提交。比如讓表單檢查每個元素是否爲空。如果腳本發現元素爲空，則會彈出一個提示，提示「表單未填充，請使用*查看所有元素」。然後它會出現星號。

感謝任何已閱讀過此內容的人。

編輯：做一些環顧四周越來越似乎警報被認爲是不好的做法。這是真的？有沒有其他方式可以讓用戶知道元素是否爲空？

Answer 1

你可以使用jQuery驗證（或類似）像EdSF提及或者你可以只是改變提交按鈕到一個常規的按鈕，當它點擊它調用一個函數來驗證你的領域，如果非空是提交表單。我沒有測試過下面的代碼，但你明白了。

function validateForm(){ 
    var isValid = true; 

    var elements = document.getElementById('ss-form').getElementsByTagName('input'); 

    for(var i=0; i < elements.length; i++){ 
    if(elements[i].value.length < 1){ 
     isValid = false; 
    } 
    } 

    if(isValid){ 
    document.getElementById('ss-form').submit(); 
    } 
    else { 
    alert('Please fill all required fields'); 
    } 
} 

Answer 2

使用jQuery你可以完成你想要做的一切。 jQuery很容易學習。下面是使用jQuery的代碼示例：

這是你可以做什麼一個很小的例子。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function(){ 

$('#entry_0').blur(function() 
{ 
var Fullname = $(this).val(); 
$('#nameresult').css("display","none"); 
if(Fullname.length>0) 
    { 
    $('#nameresult').css("display","inline-block"); 
    $('#nameresult').css("color","#00BB00"); 
    $('#nameresult').html("Valid") 
    return true; 
    } 
    $('#nameresult').css("display","inline-block"); 
    $('#nameresult').css("color","#ff0000"); 
    $('#nameresult').html("Input Needed") 
    $(this).focus(); 
    return;  
    }); 


$('#entry_1').blur(function() 
{ 
var Companyname = $(this).val(); 
$('#companyresult').css("display","none"); 
if(Companyname.length>0) 
    { 
    $('#companyresult').css("display","inline-block"); 
    $('#companyresult').css("color","#00BB00"); 
    $('#companyresult').html("Valid") 
    return true; 
    } 
    $('#companyresult').css("display","inline-block"); 
    $('#companyresult').css("color","#ff0000"); 
    $('#companyresult').html("Input Needed") 
    $(this).focus(); 
    return;  
    }); 

    }); 

</script> 
    </head> 
    <body> 
<form > 
FULL NAME:<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42"> 
<div id="nameresult" style="display: none;"></div> 
<br> 

COMPANY NAME:<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42"> 
<div id="companyresult" style="display:none;"></div> 
<br> 

EMAIL ADDRESS:<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42"><br> 

Your Request:<textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea><br><br> 

<input class="submitbuttons" type="submit" name="submit" value="SUBMIT" src="" border="0" /> 

    </form> 
    </body> 
</html> 

請原諒代碼格式化，我很快輸入了代碼。

這裏是一個jQuery

Answer 3

這裏是我的電子郵件加密的網站使用的工作模式的鏈接： http://jsfiddle.net/2b6d5/46/

隨意添加到它，改變它...張貼任何叉子/更新在這裏。 :)

/* 
* validate an e-mail address by leveraging the HTML5 
* input element with type "email" 
*/ 

function validate() { 
    var input = document.createElement('input'); 
    input.type='email'; 
    input.value=document.getElementById('valid').value; 

    if (input.checkValidity()) { 
    document.getElementById('address').style.background = 'green'; 
    } else { 
    document.getElementById('address').style.background = 'red'; 
    } 

    return false; 
} 

function val2(){ 
     var input = document.createElement('input'); 
    input.type='email'; 
    input.value=document.getElementById('valid').value; 
    if (input.checkValidity()) { 
    return true; 
    } else { 
    alert("Not a valid e-mail address"); 
    return false; 
} 
}