验证带有onClick添加的表单字段的HTML表单

问题描述

| 我有一个表格，以及一些在线复制的代码，所以我的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:[e-mail]\" 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>

我如何才能提交它，但仍然检查“数量和描述”字段的每一次出现？     

解决方法

首先，我不会在输入名称中使用空格，因为那样您就不得不处理奇怪的转义问题。改用\“ 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（并且不应这样做），否则您绝对不需要它。