如果输入为空，jQuery停止按钮出现

我对jQuery非常陌生，一直在为学校项目列表应用程序制定一些纠结措施。如果输入空白，我一直在寻找一种方法来使输入不提交。我找到了一些方法阻止它进入，并弹出一条警告消息等。但是，当提交表单时，即使尝试使用警报弹出窗口阻止它，也会显示2个按钮。当我试图让输入空白时停止出现按钮，我最终得到垃圾邮件与警报消息，并且按钮仍然显示，并且整个页面变得扭曲...如果输入为空，jQuery停止按钮出现

所以我的问题是怎么可以我应用了一条警告消息，或者只是防止完全提交表单，并且防止在输入为空时按下按钮。

$(document).ready(function() { 
 
    $('body').css('opacity', '0').fadeTo(1500, 1, 'swing'); 
 

 

 

 
}); 
 

 
$('button.submit').click(function() { 
 
    var new_task = $('input').val() + " x" + $('input + input').val(); 
 
    var $deleteButton = $('<button />').addClass('remove').text(''); 
 
    var $li = $('<li />').text(new_task); 
 
    var $quantityButton = $('<input type="checkbox" />'); 
 

 

 

 
    $('#list').append($li); 
 
    $quantityButton.appendTo($li); 
 
    $deleteButton.appendTo($li); 
 
    $("form").trigger("reset"); 
 

 
    $('#form').click(function() { 
 
    if ($(this).val() == '') { 
 
     alert('Input can not be left blank'); 
 
    } 
 
    }); 
 

 

 
    return false; 
 
}); 
 

 

 

 
$('#list').on('click', '.remove', function() { 
 
    $(this).parent().remove(); 
 
    console.log($(this)); 
 
}); 
 

 

 
$('#list').on('change', 'input[type="checkbox"]', function() { 
 
    var $li = $(this).parent(); 
 

 
    if ($(this).is(':checked')) { 
 
    $li.css('textDecoration', 'line-through'); 
 
    } else { 
 
    $li.css('textDecoration', 'none'); 
 
    return false; 
 
    } 
 

 

 

 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Shopping list</title> 
 
    <link href='https://fonts.googleapis.com/css?family=Old+Standard+TT:400,700,400italic' rel='stylesheet' type='text/css'> 
 
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet'> 
 
    <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet'> 
 
    <link href="css/style.css" rel="stylesheet"> 
 
</head> 
 

 
<body id="background"> 
 

 
    <div class="container"> 
 
    <h2>Shopping List</h2> 
 
    <h3> </h3> 
 
    <div class="form-list"> 
 
     <form> 
 
     <input type="text" id="new-text" placeholder="Add item to list" /> 
 
     <input type="number" id="quantity" /> 
 
     <button class="submit"></button> 
 

 

 
     </form> 
 

 
     <ul id="list"> 
 

 
     </ul> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 

 
    </div> 
 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
 
    <script src="js/jquery.js"></script> 
 
</body> 
 

 
</html>

将在所有找我的项目是这样的，如果有帮助。 Mockup 1

感谢您的帮助。我对编码非常陌生，我感谢所有的帮助和耐心！

-Thomas

来源

2016-01-20 Thomas T.

你不应该链接到的代码页，但包括这里的代码片段工具的代码。 – user3154108

对不起！我已经上传了片段。感谢您通知我该功能。 :) –

你使用'＃表单'，但是你没有任何元素的id'form'。 – Ivar

请参阅下面的验证空白输入。当任何输入为空时，它会发出警报。修改字段按您的要求

$('button.submit').on('click', function(){ 
 
    var blankFlag = false; 
 
    $('input').each(function(){ 
 
    if(!jQuery.trim(jQuery(this).val()).length){ 
 
     blankFlag = true; 
 
    } 
 
    }); 
 
    if(blankFlag){ 
 
     alert('blank'); 
 
     return false; 
 
    } 
 
    return true; 
 
});

来源

2016-01-20 08:24:35 Diljohn5741

，如果你想停止的提交，提交您page.then使用

e.preventDefault();

这将阻止页面submitting.and用它点击提交按钮。

如果你想隐藏按钮，直到文本框为空。

$("#myTextBox").change(function(){ 
if($(this).val().length>0){$("#myButton").show()} 
else{$("#myButton").hide()} 
});

，并保持从最初stage.hope隐藏的按钮，这将工作

来源

2016-01-20 09:51:45

如果输入为空，jQuery停止按钮出现

回答

相关问题