使用onClick添加的表單字段驗證HTML表單

Question

我有一個表單，它與一些在線複製的代碼拼湊在一起，因此我的HTML和Javascript知識非常基本。該表單有一個按鈕，單擊時會添加另一組相同的表單域。我添加了一些代碼，以便如果沒有填寫「數量和說明」字段，表單將不會提交，但現在它只是在該字段未填寫時彈出警報，即使該字段未填寫。這裏的是我的腳本：

<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'> 
</script><script type='text/javascript'> 
//<![CDATA[ 
$(function(){ 
$('#add').click(function() { 
var p = $(this).closest('p'); 

    $(p).before('<p> Quantity & Description:<br><textarea name="Quantity and Description" rows="10" 

cols="60"><\/textarea><br>Fabric Source: <input type="text" name="Fabric Source"><br>Style# & Name: <input 

type="text" name="Style# & Name"><br>Fabric Width: <input type="text" name="Fabric Width"><br>Repeat Information: 

<input type="text" name="Repeat Info" size="60"><input type="hidden" name="COM Required" /> </p><br>'); 
return false; 
}); 
}); 
function checkform() 
{ 
var x=document.forms["comform"]["Quantity and Description"].value 
if (x==null || x=="") 
{ 
alert("Quantity & Description must be filled out, DO NOT just put an SO#!!"); 
return false; 
} 
} 
//]]> 
</script> 

這是我的HTML：

<form action="MAILTO:ayeh@janusetcie.com" method="post" enctype="text/plain" id="comform" onSubmit="return 

checkform()"> 
<div>Please complete this worksheet in full to avoid any delays.<br /> 
<br />Date: <input type="text" name="Date" /> Sales Rep: <input type="text" name="Sales Rep" /> Sales Quote/Order#: <input type="text" name="SQ/SO#" /><br /> 
<br />Quantity &amp; Description: <font color="red"><i>Use "(#) Cushion Name" format.</i></font><br /> 
<textarea name="Quantity and Description" rows="10" cols="60"> 
</textarea> 
<br />Fabric Source: <input type="text" name="Fabric Source" /><br />Style# &amp; Name: <input type="text" name="Style# &amp; Name" /><br />Fabric Width: <input type="text" name="Fabric Width" /><br />Repeat Information: <input type="text" name="Repeat Info" size="60" /><br /><font color="red"><i>Example: 13.75" Horizontal Repeat</i></font><br /> 
<br /><input type="hidden" name="COM Required" /> 
<p><button type="button" id="add">Add COM</button></p> 
</div> 
<input type="submit" value="Send" /></form> 

我怎樣才能得到它提交，但仍查「數量和描述」字段的每一次出現？

Answer 1

首先，我會而不是在您的輸入名稱中使用空格，因爲您必須處理奇怪的轉義問題。改用「QuantityAndDescription」之類的東西。

此外，它看起來像你想擁有多個相同名稱的字段。要做到這一點，最好的辦法是將支架添加到名字，這意味着值將被組合在一起作爲一個數組：

<textarea name="QuantityAndDescription[]"></textarea> 

這也意味着代碼必須得到所有的文字區域，而不只是第一個。我們可以使用jQuery抓取我們想要的元素，循環它們並檢查值。試試這個：

function checkform() 
{ 
    var success = true; 

    // Find the textareas inside id of "comform", store in jQuery object 
    var $textareas = $("form#comform textarea[name='QuantityAndDescription[]']"); 

    // Loop through textareas and look for empty values 
    $textareas.each(function(n, element) 
    { 
     // Make a new jQuery object for the textarea we're looking at 
     var $textarea = $(element); 

     // Check value (an empty string will evaluate to false) 
     if(! $textarea.val()) 
     { 
      success = false; 
      return false; // break out of the loop, one empty field is all we need 
     } 
    }); 

    if(!success) 
    { 
     alert("Quantity & Description must be filled out, DO NOT just put an SO#!!"); 
     return false; 
    } 

    // Explicitly return true, to make sure the form still submits 
    return true; 
} 

此外，純粹美學的一個旁註：你不再需要使用CDATA評論黑客。這是從舊的XHTML時代開始的，以防止嚴格的XML解析器崩潰。除非你使用的是XHTML Strict Doctype（你不應該），否則你絕對不需要它。