gpt4 book ai didi

javascript - 如果输入为空,jQuery STOP 按钮不会出现

转载 作者:行者123 更新时间:2023-11-28 06:32:31 25 4
gpt4 key购买 nike

我是 jQuery 的新手,一直在解决学校元素列表应用程序的一些问题。如果输入为空,我一直在寻找一种使输入不提交的方法。我找到了一些方法来阻止它继续运行,并弹出一条警告消息等。但是,我在提交表单时出现了 2 个按钮,即使在尝试使用警报弹出窗口阻止它之后,它们也会出现。当我尝试让按钮在输入为空白时停止出现时,我最终收到了垃圾邮件,警告消息仍然出现,并且整个页面变得困惑...

所以我的问题是如何应用警告消息,或者只是防止表单被完全提交并防止按钮在输入为空时出现。

$(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

感谢您的帮助。我刚接触编码,非常感谢您的所有帮助和耐心等待!

-托马斯

最佳答案

请参阅下文以验证空白输入。当任何输入为空白时,它会发出警报。根据您的要求修改字段

$('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;
});

关于javascript - 如果输入为空,jQuery STOP 按钮不会出现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34893938/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com