Question

我正在尝试验证一系列表单输入字段和文本区域元素;使用附加到表单的submit事件的jquery函数。这些元素是动态创建的表行和表的一个现有行的混合，用户可以从中添加其他行。理想情况下，如果任何行上有空输入字段或文本区域，我想完全阻止表单提交。在完美的世界中，这些也将被涂成红色，以指示哪些数据缺失。这是我到目前为止没有太多运气的地方。

<button type="submit" id="create_course" name="create_course" value="sent"><img title = "click to save your newly creatde course!" id = "button_img" src="../images/red_button.png"><p id = "red_button_title"><span>Create</span></button>

                           <div id="table_wrapper">
                              <table  id="table1">
                                <thead>
                                  <tr >
                                    <th>Unit code</th>
                                     <th>Description</th>
                                      <th>Delete unit</th>
                                       <th>Add new unit</th>
                                  </tr>
                                </thead>
                                <tbody></tbody>
                               </table>
                             </div>   

                              <div id="table_wrapper2">
                              <table id="table2">
                              <thead></thead>
                              <tbody>

                                 <tr>
                                  <td><input  class = "unit <?php echo $class;?>" type = "text" name = "unit_code[]" value = "<?php echo @$_POST['unit_code'][0]?>"></td>
                                   <td><textarea cols = "10" rows = "2" id="unit_description" class="unit_description <?php echo $class;?>" name = "unit_description[]"><?php echo @$_POST['unit_description'][0]?></textarea></td>
                                    <td><img  title = "remove unit" class = "remove_row" src = "../images/exit.png"> </td>
                                     <td><img title = "add more units" class = "add_row" src = "../images/add-resource.png"></td>
                                 </tr>
                                </tbody>
                             </table>
                            </div> <!-- end of table wrapper  -->

$(document).ready(function() 
{


$(document).on('click' ,'.add_row', function() 
{

    $('#table2 > tbody:last-child').append("<tr><td><input class = 'unit <?php echo $class;?>' type = 'text' name = 'unit_code[]' value =''></td>" +
                              "<td><textarea class= 'unit_description <?php echo $class;?>' cols = '10' rows = '2'  name = 'unit_description[]'></textarea></td>" +
                              "<td><img  title = 'remove unit' class = 'remove_row' src = '../images/exit.png'></td>" +
                              "<td><img title = 'add more units' class = 'add_row' src = '../images/add-resource.png'></td></tr>");

});


$(document).on('click' ,'.remove_row', function()
{
  //place a check here that it is not the last of this element otherwise the user will not have any other way to add students if they accidentally remove the last one
  var n = $( "#table2 tr" ).length;
  alert('there are' + n + 'rows');
   if(n <2)
   {
     alert('You cannot delete this row , please leave the content blank if you do not wish to enter any data');

   }
   else
   {
      $(this ).parents('tr').remove();
  }
 });

$('textarea').each(function(){
        $(this).val($(this).val().trim());
    }
);


$(document).on('submit','#submit_design', function(e)
{

 var unitCode;
 var unitDescription;
 var validate=true;

  $("#table2 tr").each(function() 
   {

     // this represents the row
     $("td > *", this).each(function() 
     {

       function processRow () {

        if(this.nodeName == "INPUT") 
        {
         console.log('input node called');
           unitCode = $(this).val();
         }
        if(this.nodeName == "TEXTAREA")
        {
         console.log('textare node called');
           unitDescription = $(this).val();  
        }

        }

        processRow();

        if(unitCode == null && unitDescription != null)   
        {
          alert('validatioj area called');
          validate = false;
        }

        if(unitCode != null && unitDescription == null)
        {

           alert('validatioj area called');
          validate = false;
        }

      });
   });

  alert(validate);
    if(!validate)
     {
      alert('you must provide both a unit code and a description code for every entry, please ammend');

     }
 });//end of validate form function   

});  //end of javascript on document.ready

Answer 1

这里的关键是了解preventDefault（）是如何工作的，并确保良好地使用词法范围和标志。令人困惑的是，设置表单提交事件以触发该功能不起作用，但通过单击提交按钮调用该功能就可以了。不确定为什么，但似乎在这里工作的是修改后的javascript（jquery）代码：

   $('#create_course').click(function(e)
 {     

      validate = true;                                 
    $("#table2 tr").each(function() 
     {
        var unitCode = null;
         var unitDescription = null;


          // this represents the row
          $("td > *", this).each(function() 
           {               
                if(this.nodeName == "INPUT") 
                {
                 unitCode = $(this).val();
                }

               if(this.nodeName == "TEXTAREA")
                {
                  unitDescription = $(this).val();       
                }                   
           });

            if(unitCode === '' || unitDescription === '')
            {
              alert('Please ensure that you enter a unit code and description for each entry');


             validate = false;
            }

       if(!validate)
       {
        e.preventDefault();
       }
     });
 });

jQuery表单验证问题

1 个答案: