42

我需要使用 jQuery 验证表单。我可以一一检查我的所有输入，但这不是一个非常实用的解决方案。

如何更有效地检查我的所有输入是否为非空？在我的表单中，我可以有input不同类型的元素：文本、几组收音机、选择等。

4

10 回答 10

57

只需使用：

$("input:empty").length == 0;

如果它为零，则没有一个是空的。

为了更聪明一点，并且过滤掉只有空格的项目，你可以这样做：

$("input").filter(function () {
    return $.trim($(this).val()).length == 0
}).length == 0;
于 2013-04-25T10:12:01.487 回答
28

使用each：

var isValid;
$("input").each(function() {
   var element = $(this);
   if (element.val() == "") {
       isValid = false;
   }
});

jQuery validate但是，使用IMO 更清洁的东西可能会更好。

于 2013-04-25T10:05:30.337 回答
14 
$('#form_submit_btn').click(function(){
    $('input').each(function() {
        if(!$(this).val()){
            alert('Some fields are empty');
           return false;
        }
    });
});
于 2013-04-25T10:15:28.923 回答
3

我只是想指出我的答案，因为我知道for循环比循环更快$.each，它是：

只需添加class="required"到您想要的输入，然后在 jquery 中执行：

$('#signup_form').submit(function(){
    var fields = $('input.required');
    for(var i=0;i<fields.length;i++){
        if($(fields[i]).val() != ''){
            //whatever
        }
    }
});
于 2015-04-09T14:43:09.270 回答
3 
$('input').each(function() {
    if ($(this).val() != '') {
        console.log('all inputs filled');
    }
    else{
        console.log('theres an empty input');
        return false
    }
});

你可能想把它包装在一个 keyup 函数中

于 2016-09-22T08:08:04.823 回答
2

你可以做到。这是代码

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{display:inline-block;height:20px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;}
textarea{height:auto;}
select,textarea,input[type="text"],input[type="password"],input[type="datetime"],input[type="datetime-local"],input[type="date"],input[type="month"],input[type="time"],input[type="week"],input[type="number"],input[type="email"],input[type="url"],input[type="search"],input[type="tel"],input[type="color"],.uneditable-input{background-color:#ffffff;border:1px solid #cccccc;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-transition:border linear 0.2s,box-shadow linear 0.2s;-o-transition:border linear 0.2s,box-shadow linear 0.2s;transition:border linear 0.2s,box-shadow linear 0.2s;}textarea:focus,input[type="text"]:focus,input[type="password"]:focus,input[type="datetime"]:focus,input[type="datetime-local"]:focus,input[type="date"]:focus,input[type="month"]:focus,input[type="time"]:focus,input[type="week"]:focus,input[type="number"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="search"]:focus,input[type="tel"]:focus,input[type="color"]:focus,.uneditable-input:focus{border-color:rgba(82, 168, 236, 0.8);outline:0;outline:thin dotted \9;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);height: 20px;}
select,input[type="radio"],input[type="checkbox"]{margin:3px 0;*margin-top:0;line-height:normal;cursor:pointer;}
select,input[type="submit"],input[type="reset"],input[type="button"],input[type="radio"],input[type="checkbox"]{width:auto;}
.uneditable-textarea{width:auto;height:auto;}
#country{height: 30px;}
.highlight
{
    border: 1px solid red !important;
}
</style>
<script>
function test()
{
var isFormValid = true;

$(".bs-example input").each(function(){
    if ($.trim($(this).val()).length == 0){
        $(this).addClass("highlight");
        isFormValid = false;
        $(this).focus();
    }
    else{
        $(this).removeClass("highlight");
    }
});

if (!isFormValid) { 
    alert("Please fill in all the required fields (indicated by *)");
}

  return isFormValid;
 }  
 </script>
</head>
 <body>
 <div class="bs-example">
<form onsubmit="return test()">
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="text" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
   </form>
  </div>
 </body>
 </html>
于 2014-05-30T04:44:57.857 回答
1 
var isValid = true;
$("#tabledata").find("#tablebody").find("input").each(function() {
var element = $(this);
if (element.val() == "") {
isValid = false;
}
else{
isValid = true;
}
}); 
console.log(isValid);
于 2018-07-25T03:20:23.553 回答
0

像这样：

if ($('input[value=""]').length > 0) {
   console.log('some fields are empty!')
}
于 2018-05-11T06:58:11.003 回答
0

您可以使用 Regex 和 Replace 或仅修剪来实现此目的。

正则表达式示例：

if ($('input').val().replace(/[\s]/, '') == '') {
    alert('Input is not filled!');
}

使用此replace()功能，您可以用任何内容替换空格（删除空格）。

修剪示例：

if ($('input').val().trim() == '') {
    alert('Input is not filled!');
}

trim()函数从字符串中删除前导和尾随空格和行终止符。

于 2020-06-23T11:00:01.193 回答
-1

let timer $('input').on('input change', function () { $('input').each(function () { clearTimeout(timer) timer = setTimeout(() => { if ($( this).val() != '') { console.log('所有输入已填充'); } else { console.log('theres an empty input'); return false } }, 0) }) })

于 2022-01-15T19:15:07.580 回答