2013-06-19 58 views
2

這是我的工作代碼: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"); 
} 

誰能告訴我如何實現這個檢查在我當前的代碼嗎?

回答

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/

1

這裏的JsFiddle,總部設在你的

增加的部分是:

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

嘗試

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

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

由於您的默認值是add,一個簡單的檢查就可以了:

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

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

1

的條件可能是:

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

工作演示: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--; 
});