檢查是否有多個必填字段爲空

所以，我試圖在提交表單到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

檢查是否有多個必填字段爲空

回答

相關問題