我有一个表单，我希望填写所有字段。如果单击某个字段然后未填写，我希望显示红色背景。
这是我的代码：
$('#apply-form input').blur(function () {
if ($('input:text').is(":empty")) {
$(this).parents('p').addClass('warning');
}
});
无论字段是否填写，它都会应用警告类。
我做错了什么？
【问题讨论】：
标签： jquery validation
如何在 jquery 中检查 null undefined 和 empty
$(document).on('input', '#amt', function(){
let r1;
let r2;
r1 = $("#remittance_amt").val();
if(r1 === undefined || r1 === null || r1 === '')
{
r1 = 0.00;
}
console.log(r1);
});
【讨论】：
试试这个：
function empty(){
if ($('.text').val().length == 0)
{
alert("field should not be empty");
}
}
【讨论】：
if($("#textField").val()!=null)
这对我有用
【讨论】：
请使用此代码输入文本
$('#search').on("input",function (e) {
});
【讨论】：
这是一个干净的纯 CSS 解决方案：
input[type="radio"]:read-only {
pointer-events: none;
}
【讨论】：
很好的答案集合，想补充一点，您也可以使用: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 选择器。如果您在输入上使用 required 属性，则可以使用这些选择器。
【讨论】：
keyup 事件将检测用户是否也清除了该框（即退格键引发事件，但退格键不会引发 IE 中的按键事件）
$("#inputname").keyup(function() {
if (!this.value) {
alert('The box is empty');
}});
【讨论】：
$('#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');
}
});
如果您确定它将始终对文本字段元素进行操作，那么您可以使用 this.value。
$('#apply-form input').blur(function()
{
if( !this.value ) {
$(this).parents('p').addClass('warning');
}
});
您还应注意$('input:text') 抓取多个元素，指定上下文或使用this 关键字，如果您只想引用一个单独的元素（前提是上下文的后代/子元素中有一个文本字段）。
【讨论】：
你也可以使用..
$('#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');
}
});
【讨论】：
function checkForm() {
return $('input[type=text]').filter(function () {
return $(this).val().length === 0;
}).length;
}【讨论】：
$(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
【讨论】：
这是一个使用 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
}
}
【讨论】：
使用 HTML 5，我们可以使用“必需”的新功能，只需将其添加到您希望需要的标签中，例如：
<input type='text' required>
【讨论】：
怎么没人提
$(this).filter('[value=]').addClass('warning');
在我看来更像 jquery
【讨论】：
<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>// :)
【讨论】：
在模糊上做这件事太有限了。它假设重点放在表单字段上，所以我更喜欢在提交时进行，并通过输入进行映射。经过多年处理花哨的模糊、聚焦等技巧，让事情变得更简单将在重要的地方产生更多的可用性。
$('#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..
});
【讨论】：
还有一件事你可能要考虑一下，目前它只能添加警告类，如果它是空的，当表单不再为空时，如何再次删除该类。
像这样：
$('#apply-form input').blur(function()
{
if( !$(this).val() ) {
$(this).parents('p').addClass('warning');
} else if ($(this).val()) {
$(this).parents('p').removeClass('warning');
}
});
【讨论】：
你可以试试这样的：
$('#apply-form input[value!=""]').blur(function() {
$(this).parents('p').addClass('warning');
});
它将仅将.blur() 事件应用于具有空值的输入。
【讨论】：
if ($('input:text').val().length == 0) {
$(this).parents('p').addClass('warning');
}
【讨论】：
if (('input:text').val().length == 0) { 中缺少$ 它应该是if ($('input:text').val().length == 0) {
每个人都有正确的想法，但我喜欢更明确一点并精简价值观。
$('#apply-form input').blur(function() {
if(!$.trim(this.value).length) { // zero-length string AFTER a trim
$(this).parents('p').addClass('warning');
}
});
如果您不使用 .length ，则 '0' 的条目可能会被标记为错误，而 5 个空格的条目可能会在没有 $.trim 的情况下被标记为正常。祝你好运。
【讨论】：
this.val 将是 undefined 那里。它必须是 $(this).val() - 但没有跨浏览器的优势，所以为了简洁/速度，我把它省略了。
考虑改用the jQuery validation plugin。对于简单的必填字段，它可能有点矫枉过正，但它已经足够成熟，可以处理您甚至还没有想到的边缘情况（在我们遇到它们之前我们任何人都不会）。
您可以用“必需”类标记必填字段，在 $(document).ready() 中运行 $('form').validate() 即可。
它甚至还托管在 Microsoft CDN 上，以便快速交付：http://www.asp.net/ajaxlibrary/CDN.ashx
【讨论】：
:empty 伪选择器用于查看元素是否不包含子元素，您应该检查该值：
$('#apply-form input').blur(function() {
if(!this.value) { // zero-length string
$(this).parents('p').addClass('warning');
}
});
【讨论】：