我有一个表格,希望填写所有字段。如果单击某个字段然后又不填写,则我要显示红色背景。
这是我的代码:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
无论是否填写该字段,它都将应用警告类。
我究竟做错了什么?
我有一个表格,希望填写所有字段。如果单击某个字段然后又不填写,则我要显示红色背景。
这是我的代码:
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
无论是否填写该字段,它都将应用警告类。
我究竟做错了什么?
Answers:
$('#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
关键字。
.val().length
,而是使用.length()
了元素本身。
每个人都有正确的想法,但我想更明确一些,并精简价值观。
$('#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。祝你好运。
this.val
会在undefined
那里。它必须是$(this).val()
-但是没有跨浏览器的优势,因此出于简洁/速度考虑,我省略了它。
进行模糊处理太有限了。它假定重点放在表单字段上,因此我更喜欢在提交时进行操作,并通过输入进行映射。经过多年处理花哨的模糊,聚焦等技巧之后,保持简单易用性将在重要的地方产生更多的可用性。
$('#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..
});
怎么没人提
$(this).filter('[value=]').addClass('warning');
在我看来更像jQuery
考虑改用jQuery验证插件。对于简单的必填字段,这可能有点过大了,但它已经足够成熟,可以处理您甚至还没有想到的极端情况(在遇到它们之前,我们当中的任何一个都不会)。
您可以使用“必需”类标记必填字段,在$(document).ready()中运行$('form')。validate(),仅此而已。
它甚至也托管在Microsoft CDN上,以实现快速交付:http : //www.asp.net/ajaxlibrary/CDN.ashx
这是一个使用键盘输入选定输入的示例。它还使用修剪,以确保仅空格字符的序列不会触发真实的响应。这是一个示例,可用于启动搜索框或与该功能类型相关的内容。
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
}
}
$(function() {
var fields = $('#search_form').serializeArray();
is_blank = true;
for (var i = 0; i < fields.length; i++) {
// excluded fields
if ((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
您可以尝试如下操作:
$('#apply-form input[value!=""]').blur(function() {
$(this).parents('p').addClass('warning');
});
它将.blur()
事件仅应用于具有空值的输入。
使用HTML 5,我们可以使用“必需”的新功能,只需将其添加到所需的标签中即可,例如:
<input type='text' required>
大量的答案,想补充一下,您也可以使用: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
选择器。如果在输入上使用必需的属性,则可以使用这些选择器。