添加輸入值校驗按下按鈕

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--; 
}); 

演示：Fiddle

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()從值的開頭和結尾刪除任何空格，以便如果該值僅包含空格，則不會通過該檢查。

Fiddle

添加到您的代碼，它看起來像：

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--; 
});