检查是否有多个必填字段为空

所以，我试图在提交表单到AJAX之前验证具有“必需”属性的HTML输入，并且我无法弄清楚我的生活如何做到这一点字段有一个唯一的ID（这是不可能的，因为我真的希望能够添加“required”到字段并重用代码而不必向其中添加多个ID）。检查是否有多个必填字段为空

这里是我的HTML的snipett，所以你可以看到什么，我选择：

<div class="control-group"> 

     <label class="control-label"><span class="req">*</span> Contact Name:</label> 
     <div class="controls"> 

      <input class="input-block-level" type="text" name="contactTitle" value="{$widget.options.contactTitle}" placeholder="Marty McFly" required /> 

     </div> 
    </div>

而这里的jQuery的：

function configureSubmit() { 

     var reqInput = "input[required]" 

     if($(reqInput)) { 

      $(reqInput).each(function() { 

       if(!$(this).val()){ 

        $('input[required]').addClass('falseVal'); 

       } else { 

        $('input[required]').removeClass('falseVal'); 

       } 

      }); 
     } 

     if ($(reqInput).hasClass('falseVal')) { 

      alert("Please fill in all required fields."); 
      $('input[required]').css('border', '1px solid red'); 

     } else { 

      $.ajax({ 

       type: 'POST', 
       url: $("#options-form").attr('action'), 
       data: $("#options-form").serialize(), 
       success: function(data) { 

        if (data=='1') { 

         if ($.inArray(configureId,staged_widgets)<0) { 
          staged_widgets.push(configureId); 

         } 

         $("#configure").modal('hide'); 
         $("#widget-"+configureId).removeClass('new-widget'); 
         updateWidget(configureId); 

        } 

       } 

      }); 

     }

而且提交按钮：

<input type="submit" class="btn btn-primary" onclick="configureSubmit(); return false;" Value="Update" />

正如你所看到的，如果字段是空的，我将添加一个类，然后在填充字段时删除一个类。然后我检查这个课程，如果它不存在，它会提交。

这里的问题是，如果我不使用。每（）选择和我有一个以上的必填字段，只要第一填报的，它会提交给AJAX。如果我做使用.each（）选择器，它可以正确地为所有字段为空，除了最后一个。如果填入最后一个字段，它将提交给AJAX，因为该函数将从所有必填字段中删除“falseVal”类。

有一个更好的方法来做到这一点！有任何想法吗？

来源

2016-07-14 MatrixClaw

我更喜欢首先得到无效元素的集合....然后，如果该集合有长度，你不会继续。

这条线：

if($(reqInput)) {

永远是真实的，即使没有这样的，因为它如果选择匹配发现，无论创建了一个jQuery对象或不和if({})是truthy

使用filter()你可以得到残疾人的收集

var $required = $("input[required]").removeClass('falseVal'), 
    $invalid = $required.filter(function(){ 
     return !this.value; // only want elements with no value 
    }).addClass('falseVal'); 

if($invalid.length){ 
    alert('not all fields filled'); 
}else{ 
    $.ajax({/* options */}); 
}

来源

2016-07-14 22:46:40 charlietfl

Aweso我！非常感谢你，它的工作！我知道必须有一个更简单的方法！：P – MatrixClaw

检查是否有多个必填字段为空

回答

相关问题