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>

这也意味着代码必须获得所有textareas，而不仅仅是第一个。我们可以使用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（你不应该），否则你绝对不需要它。

使用onClick添加的表单字段验证HTML表单

1 个答案: