如何解决验证带有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: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 & 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# & 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\" /><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(并且不应这样做),否则您绝对不需要它。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。