jQueryですべての入力が空でないかどうかを確認する方法

jQueryを使用してフォームを検証する必要があります。すべての入力を1つずつチェックすることはできますが、それは実際的な解決策ではありません。jQueryですべての入力が空でないかどうかを確認する方法

すべての入力が空でない方が効率的かどうかを確認するにはどうすればよいですか？私のフォームでは、私はさまざまな種類のinput要素持つことができますテキスト、ラジオのいくつかのグループを選択するなど

2013-04-25 Clément Andraud

は、あなたが望むすべてのフィールドに同じクラスを記述からkeyup機能でこれをラップする場合がありますval（）！= '' – swetha

可能な複製[すべてのフォーム入力がjQueryで空であるかどうかをチェックする]（http://stackoverflow.com/questions/10517315/）私がダウンした有権者ではない： '） –

使用each：あなたはおそらくIMOがあるjQuery validateのようなものを使用したほうが良いでしょうしかし

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

クリーナー。

出典

2013-04-25 10:05:30

動作しません、私はalwを持っていますays false –

@ClémentAndraud - 'each'の前にisValid = trueを代入します –

ラジオボタンのグループが複数ある場合は問題があると思います。 –

ちょうど使用：

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

それがゼロなら、どれも空ではありません。しかし少し賢くなり、また、あなたが行うことができ、中にちょうどスペースでアイテムをフィルタリングするには

：

$("input").filter(function() { 
    return $.trim($(this).val()).length == 0 
}).length == 0;

出典

2013-04-25 10:12:01 mattytommo

+17

：空のセレクタは、子を持たないすべての要素を選択するために使用されるため、意図したとおりに動作しません。 – Yeonho

フィルタ関数は 'return $ .trim（$（this）.val（））。length === 0'でなければなりません。 –

$('#form_submit_btn').click(function(){ 
    $('input').each(function() { 
     if(!$(this).val()){ 
      alert('Some fields are empty'); 
      return false; 
     } 
    }); 
});

出典

2013-04-25 10:15:28 goseo

あなたはit.hereを行うことができますが、コード

<!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-30 04:44:57

Iであります私はforループがより速いことを知っているので、私の答えを指摘したいだけでした$.eachループここにあります：

ちょうどあなたが必要とすることにしたい、その後、jqueryの中で行う入力するclass="required"を追加します。

$('#signup_form').submit(function(){ 
    var fields = $('input.required'); 
    for(var i=0;i<fields.length;i++){ 
     if($(fields[i]).val() != ''){ 
      //whatever 
     } 
    } 
});

出典

2015-04-09 14:43:09

微妙な点 - 技術的に、OPは空でないことを要求していました。これは空をチェックします。 – bphilipnyc

あなたは正しいです！一定！ –

$('input').each(function() { 
    if ($(this).val() != '') { 
     console.log('all inputs filled'); 
    } 
    else{ 
     console.log('theres an empty input'); 
     return false 
    } 
});

あなたは

出典

2016-09-22 08:08:04

jQueryですべての入力が空でないかどうかを確認する方法

答えて

関連する問題