Проверка HTML-формы с помощью onClick добавленных полей формы

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;
}

Кроме того, sidenote чистой эстетики: вам больше не нужно использовать хак комментариев CDATA.Это пережиток прежних времен XHTML, чтобы предотвратить нарушение строгих парсеров XML.Если вы не используете XHTML Strict Doctype (а вам это не нужно), он вам определенно не нужен.