檢查必填字段是否為空

Question

我想檢查必填字段是否為空。 我用下面的代碼。

$(":input").each(function() {
    if($(this).data('label')=='required')
     {
        if($(this).val() === "")
        alert("Empty Fields!!");
     }
});

但這是不只一次的警覺。 JSFiddle： http : //jsfiddle.net/hbk2a5qo/3/

Answer 1

為什么不直接在HTML中使用required屬性：

<input id="name"type="text" data-label="required" required/>

Answer 2

您需要使用一個標志

$(document).ready(function () {

    $("#submit").click(function (e) {
        e.preventDefault()
        AlertSave();
    });
});

function AlertSave() {
    //use the flag to set the valid status in the loop
    var valid = true;
    //iterate over only the required elements
    $(':input[data-label="required"]').each(function () {
        if ($(this).val() === "") {
            valid = false;
            return false;
        }
    });

    if (valid) {
        //do your save
    } else {
        alert("Empty Fields!!");
    }
}

演示： 小提琴

Answer 3

由於使用了$(":input").each()因此它將遍歷所有字段。 但是您可以使用標志僅顯示一次警報。

function AlertSave() {
var alertShown=false;   
    $(":input").each(function() {
        if($(this).data('label')=='required')
                        {
   if($(this).val() === "" && !alertShown)
   {
       alertShown=true;
        alert("Empty Fields!!");
   }
  }
});
    }

您更新了小提琴

Answer 4

通過使用required屬性（推薦），這將返回所有沒有value的必需輸入字段：

var inputsWithMissingValues = $('input[required]').filter(function(i, input) {
  return !input.value.length;
});

因此，如果長度大於零，則您必須填寫缺少值的字段。