使用jQuery检查输入是否为空
我有一个表格,我希望所有字段都填写。如果一个字段被点击,然后没有填写,我想显示一个红色背景。
这是我的代码:
$('#apply-form input').blur(function () {if ($('input:text').is(":empty")) {$(this).parents('p').addClass('warning');}
});
无论填写的字段是否填写,它都会应用警告类。
我究竟做错了什么?
#1楼
<script type="text/javascript">
$('input:text, input:password, textarea').blur(function(){var check = $(this).val();if(check == ''){$(this).parent().addClass('ym-error');}else{$(this).parent().removeClass('ym-error'); }});</script>// :)
#2楼
怎么没有人提到
$(this).filter('[value=]').addClass('warning');
对我来说似乎更像jquery
#3楼
$('#apply-form input').blur(function()
{if( !$(this).val() ) {$(this).parents('p').addClass('warning');}
});
并且您不一定需要.length
或查看它是否>0
因为无论如何空字符串的计算结果为false,但是如果您希望出于可读性目的:
$('#apply-form input').blur(function()
{if( $(this).val().length === 0 ) {$(this).parents('p').addClass('warning');}
});
如果您确定它将始终在textfield元素上运行,那么您可以使用this.value
。
$('#apply-form input').blur(function()
{if( !this.value ) {$(this).parents('p').addClass('warning');}
});
此外,您应该注意$('input:text')
抓取多个元素,指定上下文或使用this
关键字,如果您只想引用一个单独的元素(假设在上下文的后代/子元素中有一个文本字段)。
#4楼
if ($('input:text').val().length == 0) {$(this).parents('p').addClass('warning');
}
#5楼
:empty
伪选择器用于查看元素是否不包含子元素,您应该检查值:
$('#apply-form input').blur(function() {if(!this.value) { // zero-length string$(this).parents('p').addClass('warning');}
});
#6楼
请考虑使用jQuery验证插件 。 对于简单的必填字段来说,这可能有点过分,但它已经足够成熟,它可以处理你甚至还没想过的边缘情况(在我们遇到它们之前也不会有任何人)。
您可以使用“required”类标记必填字段,在$(document).ready()中运行$('form')。validate(),这就是所需要的。
它甚至还托管在Microsoft CDN上,以便快速交付: http : //www.asp.net/ajaxlibrary/CDN.ashx
#7楼
每个人都有正确的想法,但我喜欢更明确一些,并削减价值观。
$('#apply-form input').blur(function() {if(!$.trim(this.value).length) { // zero-length string AFTER a trim$(this).parents('p').addClass('warning');}
});
如果你不使用.length,那么一个'0'的条目可以被标记为坏,并且没有$ .trim就可以将一个5个空格的条目标记为ok。 最好的运气。
#8楼
使用HTML 5,我们可以使用“必需”新功能,只需将其添加到您需要的标记中,如:
<input type='text' required>
#9楼
以下是使用所选输入的keyup的示例。 它还使用一个修剪来确保一系列只有空白字符的字符不会触发真实的响应。 这是一个可用于开始搜索框或与该类型功能相关的内容的示例。
YourObjNameSpace.yourJqueryInputElement.keyup(function (e){if($.trim($(this).val())){// trimmed value is truthy meaning real characters are entered}else{// trimmed value is falsey meaning empty input excluding just whitespace characters}
}
#10楼
$(function() {var fields = $('#search_form').serializeArray();is_blank = true;for (var i = 0; i < fields.length; i++) {// excluded fieldsif ((fields[i].name != "locale") && (fields[i].name != "utf8")) {if (fields[i].value) {is_blank = false;}}}if (is_blank) {$('#filters-button').append(': OFF');}else {$('#filters-button').append(': ON');}
});
检查所有字段是否为空,并在Filter_button上追加ON或OFF
#11楼
function checkForm() { return $('input[type=text]').filter(function () { return $(this).val().length === 0; }).length; }
#12楼
你也可以用..
$('#apply-form input').blur(function()
{if( $(this).val() == '' ) {$(this).parents('p').addClass('warning');}
});
如果您对空间有疑问,请尝试..
$('#apply-form input').blur(function()
{if( $(this).val().trim() == '' ) {$(this).parents('p').addClass('warning');}
});
#13楼
keyup事件将检测用户是否也清除了该框(即退格引发事件,但退格不会引发IE中的按键事件)
$("#inputname").keyup(function() {if (!this.value) {alert('The box is empty');
}});
#14楼
你可以尝试这样的事情:
$('#apply-form input[value!=""]').blur(function() {$(this).parents('p').addClass('warning');
});
它仅将.blur()
事件应用于具有空值的输入。
#15楼
很棒的答案集,想补充说你也可以使用:placeholder-shown
CSS选择器。 使用IMO要小一些,特别是如果你已经使用了jQ并且在输入上有占位符。
if ($('input#cust-descrip').is(':placeholder-shown')) { console.log('Empty'); } $('input#cust-descrip').on('blur', '', function(ev) { if (!$('input#cust-descrip').is(':placeholder-shown')) { console.log('Has Text!'); } else { console.log('Empty!'); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">
如果您有必要的输入,也可以使用:valid
和:invalid
选择器。 如果在输入上使用必需属性,则可以使用这些选择器。
#16楼
还有一件事你可能想要考虑一下,目前它只能添加警告类,如果它是空的,那么当表单不再为空时如何再次删除类。
像这样:
$('#apply-form input').blur(function()
{if( !$(this).val() ) {$(this).parents('p').addClass('warning');} else if ($(this).val()) {$(this).parents('p').removeClass('warning');}
});
#17楼
在模糊上做这件事太有限了。 它假设有关注表单字段,所以我更喜欢在提交时进行,并通过输入进行映射。 经过多年处理花哨的模糊,专注等技巧,让事情变得更简单会产生更多的可用性。
$('#signupform').submit(function() {var errors = 0;$("#signupform :input").map(function(){if( !$(this).val() ) {$(this).parents('td').addClass('warning');errors++;} else if ($(this).val()) {$(this).parents('td').removeClass('warning');} });if(errors > 0){$('#errorwarn').text("All fields are required");return false;}// do the ajax..
});
使用jQuery检查输入是否为空相关推荐
- 如何使用JavaScript检查输入是否为空
by Zell Liew 由Zell Liew 如何使用JavaScript检查输入是否为空 (How to check if an input is empty with JavaScript) L ...
- c语言检查字符数组不为空,【C语言】检查输入是否为空,如为空,程序退出
检查用户输入是否为空行,如果输入为空,程序将退出:如不为空,屏幕打印输入的字符串. #include char input[257], *ptr; int main(void) { puts(&quo ...
- 大于在python中怎么打出来_在python中,如何检查输入不是空的并且是大于零的数字...
这是我的建议.在应立即验证并清理输入.通常在接受输入时,最好调用.strip()方法,以防用户错误地输入了额外的空格或制表符.在您读取'm'或'd'值之后,强制将其小写:然后代码的其余部分可以假定它是 ...
- 如何使用jQuery检查单选按钮?
本文翻译自:How to check a radio button with jQuery? I try to check a radio button with jQuery. 我尝试用jQuery ...
- 使用jquery检查/取消选中复选框? [重复]
本文翻译自:check / uncheck checkbox using jquery? [duplicate] This question already has an answer here: 这 ...
- python判断输入类型怎么做_如何检查输入类型?
我最初写的是:n = input('How many players? ') while type(n) != int or n <= 2: n = input('ERROR! The numb ...
- python检查列表是否为空_Python 中判断列表是否为空的方法
在判断列表是否为空时,你更喜欢哪种方式?决定因素是什么? 在 Python 中有很多检查列表是否是空的方式,在讨论解决方案前,先说一下不同方法涉及到的不同因素. 我们可以把判断表达式可以分为两个阵营: ...
- golang判断结构体为空_如何在Golang中检查结构是否为空?
golang判断结构体为空 The size of an empty structure is zero in Golang. Here, empty structure means, there i ...
- php 检查数组为空_检查数组是否为空在PHP中
php 检查数组为空 Given an array and we have to check if array is an empty or not using PHP. 给定一个数组,我们必须检查数 ...
最新文章
- 打印正方形和各种三角形
- Android开发--List与ArrayList区别
- 11. 盛最多水的容器 golang
- 浏览器安全检查己通过_Edge浏览器(Chromium)——从XSS到接管网页
- c语言leg 10,Leg massaging device
- 微信公众平台开发4-长链接转短链接口调用实例(含源码)
- python维度不一样_numpy数组维度不匹配
- scan——Theano中循环的实现
- 给ecshop后台增加管理功能页面
- iScroll示例,下拉刷新,上拉刷新
- h桥控制电机刹车_基于H桥控制直流电机驱动电路设计
- html旋转 缩放 移动,CSS3旋转缩放移动倾斜等效果——transform
- 实时数据缓存管理的初步设计
- Python习题——2018-03-28作业
- IDEA mybatisplus 代码生成器的配置
- 常用颜色对应RGB颜色图
- Variable Selection via Nonconcave PenalizedLikelihood and its Oracle Properties 论文解析-特征选择的Oracle特性-1
- nefuoj1487时空乱流
- c语言常数-ox6a是什么意思,c语言1-7章课后作业答案
- webm和mp4的重要区别
热门文章
- Android Jetpack组件之ViewModel使用
- 教你如何 构建基本的用户控件
- C语言程序设计模拟卷,C语言程序设计(上)模拟卷
- string类型加减_测试人员应该知道的Redis知识(四) String
- 软件文本框横线_免费开源剪辑软件Shotcut推荐和使用教程
- MESI缓存一致性协议
- (0069)iOS开发之dequeueReusableCellWithIdentifier的两个方法的区别
- python安装docx库_linux 环境下的python 安装 docx 的过程
- [THUWC2017]在美妙的数学王国中畅游
- Mongodb-自己写一个ORM