使用jQuery进行表单提交验证

Question

我有一个表单，我正在通过克隆添加行。我的表单中也有一个下拉值。我想在表单上添加两个验证

1. 如果用户未填写所有字段，则他将不能添加另一行（请记住，如果将下拉值设置为，则也不应允许用户添加另一行默认值）。

2. 在提交表单时，我要进行相同的验证，即如果有任何保留为空的字段或选择了下拉菜单的默认值，则用户将无法提交表单。

我已经尝试过了，但是由于它是jQuery的新手，它仍然包含许多错误。

var regex = /^([a-zA-Z0-9 _-]+)$/;
    var cindex = 0;
    var quicklink = '' ;
    $(document).on('click','.Buttons', function(addrow) {
      var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;

      if(count || !$('.id_100 option[value=description]').attr('selected','selected')){
    {
        alert("Please fill the current row");
        return false;
      }}

        var $tr    = $('#dataTable tbody tr:last');
        var $clone = $tr.clone(true);
         $('.DeleteButton').prop('disabled', false);
        cindex++;
        $clone.find('input:text').val('').attr('disabled', true);
        $clone.find('input:button').attr('disabled', true);
        $clone.attr('id', 'id'+(cindex) ); //update row id if required
        //update ids of elements in row
        $clone.find("*").each(function() {
                var id = this.id || "";
                if(id != ""){

                var match = id.match(regex) || [];
                if (match.length == 2) {
                this.id = this.name + (cindex);
                }
                }
        });
       $tr.after($clone);

    });
//-----------------------------------------------------------------------
function disableField(e)
{ var Count = $('#dataTable tr').length;
    if (Count == 2){
    $(e).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);

    }else{
    $(e).closest('tr').find("input").prop('disabled', false);
}}
//--------------------------------------------------------------------


   $(document).on("click", '.DeleteButton', function() {
     $(this).closest("tr").remove();
     var Count1 = $('#dataTable tr').length;
     if (Count1 == 2){
     $('.DeleteButton').prop('disabled', true);
     }

    });

//---------------------------------------------------------------------.

function fnOnSubmit() {
var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
if(count || !$('.id_100 option[value=description]').attr('selected','selected')){
{
        alert("Please fill all the fields");
        return false;
      }}

var flag='';
$('#dataTable input:not([type=button]),#dataTable select').each(function () {

      flag = flag + (this.value) + '~';
        quicklink = flag;
  });
   document.frmmain.quicklink.value = quicklink;

    SendTxnRequest('02','QWC'); 
}

HTML

 var regex = /^([a-zA-Z0-9 _-]+)$/;
        var cindex = 0;
        var quicklink = '' ;
        $(document).on('click','.Buttons', function(addrow) {
          var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
          
          if(count || !$('.id_100 option[value=description]').attr('selected','selected')){
    	{
            alert("Please fill the current row");
            return false;
          }}
         
            var $tr    = $('#dataTable tbody tr:last');
            var $clone = $tr.clone(true);
    		 $('.DeleteButton').prop('disabled', false);
            cindex++;
        	$clone.find('input:text').val('').attr('disabled', true);
    		$clone.find('input:button').attr('disabled', true);
            $clone.attr('id', 'id'+(cindex) ); //update row id if required
            //update ids of elements in row
            $clone.find("*").each(function() {
                    var id = this.id || "";
                    if(id != ""){
        
                    var match = id.match(regex) || [];
                    if (match.length == 2) {
        			this.id = this.name + (cindex);
                    }
                    }
            });
           $tr.after($clone);
        	
        });
    //-----------------------------------------------------------------------
    function disableField(e)
    { var Count = $('#dataTable tr').length;
        if (Count == 2){
    	$(e).closest('tr').find("input").not('.DeleteButton').prop('disabled', false);
            
        }else{
    	$(e).closest('tr').find("input").prop('disabled', false);
    }}
    //--------------------------------------------------------------------
    
    
       $(document).on("click", '.DeleteButton', function() {
         $(this).closest("tr").remove();
    	 var Count1 = $('#dataTable tr').length;
    	 if (Count1 == 2){
    	 $('.DeleteButton').prop('disabled', true);
    	 }
    	 
        });
    
    //---------------------------------------------------------------------.
    
    function fnOnSubmit() {
    var count = $('table tr:last input:text').filter((_,el) => el.value.trim() == "").length;
    if(count || !$('.id_100 option[value=description]').attr('selected','selected')){
    {
            alert("Please fill all the fields");
            return false;
          }}
    	
    var flag='';
    $('#dataTable input:not([type=button]),#dataTable select').each(function () {
    
    	  flag = flag + (this.value) + '~';
    		quicklink = flag;
      });
       document.frmmain.quicklink.value = quicklink;
      
    	SendTxnRequest('02','QWC');	
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="1" id="dataTable" name="dataTable" class="graphtable">
      <thead>
    
        <tr>
          <td class="headingalign" width="16%">Links</td>
          <td class="headingalign" width="32%">Desciption</td>
          <td class="headingalign" width="16%">Image</td>
          <td class="headingalign" width="16%">URL</td>
    	  <td class="headingalign" width="05%"></td>
    
        </tr>
      </thead>
      <tbody>
      
        <tr id="id0" class="vals" name="id0">
    	
          <td>
    	  <div class="id_100">
        <select type="select-one" id='fldsearch' class="objselect" name="fldsearch" onChange="disableField(this)" >
    		<option value="">Select</option>
    		
    			
    			<option value="">Guides	</option>
          	
    			<option value="">Latest Offers	</option>
    	
    		</select>
         </div> </td>
          <td>
            <input id="flddesc" name="flddesc" maxlength="500"  disabled="true" class="objinputtext1" size="85" value=""  />
      
          </td>
          <td>
            <input  id="fldimg" name="fldimg" maxlength="50"  disabled="true" class="objinputtext2" size="45" value=""  />
    		
          </td>
          <td>
            <input id="fldurl" name="fldurl" maxlength="55" disabled="true" class="objinputtext3" size="40" value=""  />
            
          </td>
    	  <td>
    	  <input tabindex="6" value="Delete Row" disabled="true" class="DeleteButton"  type="button" />
    	  </td>
        </tr>
      </tbody>
    </table>  
    		<div class="buttonarea">
      <ul>
        <li><input tabindex="6" id="Button3" value="Add New Row" class="Buttons" name="Button3" type="button" /></li>
    	 <li><input tabindex="6" id="Button5" value="Initiate" class="buttons" name="Button5" type="button" onclick="return fnOnSubmit();"/></li>
    	 			
    
      </ul>
     
    </div>