Question

我有一个可以添加和删除字段的表单。我从我发现的教程中构建了表单，除非您忘记完成其中一个字段，否则它的工作方式非常完美。 PHP检查工作，即我的数据库没有充满空白值，但对用户来说，它看起来好像已经完成了。

我一直在尝试使用javascript验证我的表单，并尝试了几种方法，但我对JS的了解有限，我正在努力。

这是我到目前为止编写的代码：

function validateForm() {
  if (document.getElementById$(this).attr("id").validity.valueMissing) {
   alert("Please complete all of the fields");
  }
}

$(document).ready(function(){  
  var i=1;  
  $('#add').click(function(){  
    i++;  
    $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="date" name="date[]" id="date'+i+'" required /></td><td><textarea rows="6" cols="50" name="name[]" id="name'+i+'" placeholder="Enter the training session" required ></textarea></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">X</button></td></tr>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  
  $('#submit').click(function(){           
       $.ajax({  

            method:"POST",  
            data:$('#add_name').serialize(),  
            success:function(data){  
                 alert(data);  
                 $('#add_name')[0].reset();  
            }
       }); 
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">  
  <form name="add_name" id="add_name" onsubmit="return validateForm()">  
    <div>  
      <table id="dynamic_field">  
        <tr> 
          <td><input type="date" name="date[]" id="date'+i+'" required /></td> 
          <td><textarea rows="6" cols="50" name="name[]" id="name'+i+'" placeholder="Enter the training session" required ></textarea></td>  
          <td><button type="button" name="add" id="add">Add More</button></td>  
        </tr>  
      </table>  
      <input type="button" name="submit" id="submit" value="Submit" />  
    </div>  
  </form>  
</div>

任何建议对表单验证都非常有帮助。

Answer 1

我做了一些更改，因此如果选择了日期，您的代码可以捕获：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group">  
  <form name="add_name" id="add_name" onsubmit="return validateForm()">  
    <div>  
      <table id="dynamic_field">  
        <tr> 
          <td><input type="date" name="date[]" id="date0" required /></td> 
          <td><textarea rows="6" cols="50" name="name[]" id="name0" placeholder="Enter the training session" required ></textarea></td>  
          <td><button type="button" name="add" id="add">Add More</button></td>  
        </tr>  
      </table>  
      <input type="button" name="submit" id="submit" value="Submit" />  
    </div>  
  </form>  
</div> 




<script>
function validateForm() {
  if (document.getElementById$(this).attr("id").validity.valueMissing) {
   alert("Please complete all of the fields");
  }
}
$(document).ready(function(){  
  var i=1;  
  $('#add').click(function(){  
    i++;  
    $('#dynamic_field').append('<tr id="row' + i + '"><td><input type="date" name="date[]" id="date'+i+'" required /></td><td><textarea rows="6" cols="50" name="name[]" id="name'+i+'" placeholder="Enter the training session" required ></textarea></td><td><button type="button" name="remove" id="'+i+'" class="btn_remove">X</button></td></tr>');  
  });  
  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  


  $('#submit').click(function(){           

     var isValid = true; 
     for(var c=0; c <  i; c++)
       { 
          if ($('#date'+c).val()=='')
       { 
       alert('Please choose date') ;
       $('#date'+c).css({'border' : '1px solid red'});
        isValid = 0; 
       }  
       else 
       { $('#date'+c).css({'border' : '1px solid black'}); }  



       }  // end for   

       if(isValid) { doSave() }

  });  
});  


function doSave() { 
  $.ajax({  

            method:"POST",  
            data:$('#add_name').serialize(),  
            success:function(data){  
                 alert(data);  
                 $('#add_name')[0].reset();  
            }
       }); 

}
</script>

验证可以添加或删除字段的动态表单

1 个答案: