按下按鈕即可添加輸入值檢查

Question

這是我正在使用的代碼： http ： //jsfiddle.net/9sX6X/21/

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

如果按下添加按鈕時輸入框中沒有任何內容，我想停止添加字段，例如，當用戶單擊添加並且框中沒有任何內容時，我想發出警報。

我認為它是這樣的，但我是javascript的新手：

if { val == null
alert("Nothing to be added");
}

有人能告訴我如何在我當前的代碼中實現這個檢查嗎？

Answer 1

if ($.trim(value) != "") {
      var html = '<div class="line">' +
          '<input class="accepted" type="text" value="' + value + '" />' +
          '<input type="button" value="X" class="remove" />' +
          '</div>';

      $(html).appendTo(container);
      value_src.val('');
      currentFields++;
}
else{
     alert("no value")
}

演示---> http://jsfiddle.net/9sX6X/23/

Answer 2

這是基於您的JsFiddle

添加的部分是：

if ($('#current').val().length <= 0) {
    alert("Nothing to be added");
    return;        
}

Answer 3

嘗試

var value = $.trim(value_src.val());
if(!value){
    alert('empty');
    return;
}

例如：

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = $.trim(value_src.val());
        if(!value){
            alert('empty');
            return;
        }

        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
.on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

演示： 小提琴

Answer 4

var container = $('.copies'),
    value_src = $('#current'),
    maxFields = 10,
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {
        var value = value_src.val();
        if (value == "") {
            alert("No input");
        }
        else{
        var html = '<div class="line">' +
            '<input id="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
       }
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});

Answer 5

由於您的默認值為add ，因此只需執行簡單的檢查即可：

if (this.value == "Add" || this.value == "") {
    alert("empty!");
    return false;
}

演示： http ： //jsfiddle.net/9sX6X/24/

Answer 6

條件可能是：

if ($.trim(value_src.val()) != '') {

這是將值與空白字符串''進行比較。 它還使用jQuerys $.trim()從值的開頭和結尾刪除任何空格，這樣如果值只包含空格，那么它將不會通過檢查。

小提琴

添加到您的代碼后，它將類似於：

if ($.trim(value_src.val()) != '') {
    if (currentFields < maxFields) {
        var value = value_src.val();
        var html = '<div class="line">' +
            '<input class="accepted" type="text" value="' + value + '" />' +
            '<input type="button" value="X" class="remove" />' +
            '</div>';

        $(html).appendTo(container);
        value_src.val('');
        currentFields++;
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
} else {
    alert("You didn't enter anything");
}

Answer 7

工作演示： http ： //jsfiddle.net/9sX6X/28/

在你的第一個if語句中檢查輸入的長度：

if($.trim(value) != '')

將您的代碼更改為：

var container = $('.copies');
    value_src = $('#current');
    maxFields = 10;
    currentFields = 1;

$('.copy_form').on('click', '.add', function () {
    if (currentFields < maxFields) {

        var value = value_src.val();
        if($.trim(value) != ''){
            var html = '<div class="line">' +
                '<input class="accepted" type="text" value="' + value + '" />' +
                '<input type="button" value="X" class="remove" />' +
                '</div>';

            $(html).appendTo(container);
            value_src.val('');
            currentFields++;
        }else{
            alert('Field empty!');
        }
    } else {
        alert("You tried to add a field when there are already " + maxFields);
    }
})
    .on('click', '.remove', function () {
    $(this).parents('.line').remove();
    currentFields--;
});