javascript - 使用 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 注释 hack。这是从旧的 XHTML 时代遗留下来的，以防止严格的 XML 解析器被破坏。除非您正在使用 XHTML Strict Doctype(您不应该使用)，否则您绝对不需要它。