验证必填字段是否在模态上填写 jquery

Question

我在模式弹出窗口中动态填充一些文本框，提交表单时我需要检查必填字段是否已填写。

我尝试了两种方法，但都不起作用..

如果你想查看这里是完整代码 http://jsfiddle.net/nsk21/f52nLfrj/

如何尝试 1：

 $(document).on('click', '#catSave', function(){
    var countValid = 0 ;
    totRequFileds = 0;

    $('#catCreatForm').find('input').each(function(){
        alert($(this).attr('type'));
        if(!$(this).prop('required')){
            if ( this.value.trim() !== '' ) {                           
                countValid++;                                           
            }else{      
                $(this).focus();
                return false;
            }
            totRequFileds++; 
        } else {

        }
    });       
    alert(' totRequFileds:'+totRequFileds +' | '+countValid);
});

尝试 2：

      $( ':input[required]', '#catCreatForm' ).each( function () {
            alert($(this).attr('name'));
            if ( this.value.trim() !== '' ) {                           
                countValid++;                                           
            }else{      
                $(this).focus();
                return false;
            }
            totRequFileds++; 
        });

Answer 1

您可能没有注释掉 fiddle 中的那些行，我稍微更改了这些行

$(document).on('click', '#catSave', function(){
 var countValid = 0 ;
 totRequFileds = 0;
 $( ':input[required]', '#catCreatForm' ).each( function () {
  totRequFileds++;
  alert($(this).attr('name'));
  if ( this.value.trim() !== '' ) {       
   countValid++;           
  }else{  
   $(this).focus();
   //return false;
  }
 });
 if( countValid != totRequFileds){
  alert('Please fill out all required fileds totRequFileds:'+totRequFileds +' | '+countValid);
      return false;
 }
    alert(' totRequFileds: '+totRequFileds +' | '+countValid);
});

验证必填字段是否在模态上填写 jquery

validate required fields are filled on modal with jquery

jquery

required