在jQuery中检查DIV输入项值是否为空

I've stacked some input text fields, drop downs, radio gruop inside a DIV. Now how do I check if all text fields, radio groups and dropdowns inside this DIV have some value?

我在DIV中堆叠了一些输入文本字段，下拉列表，无线电gruop。现在，我如何检查此DIV中的所有文本字段，无线电组和下拉列表是否具有某些值？

I've created a simple mockup in JSFiddle

我在JSFiddle中创建了一个简单的模型

jQ:

JQ：

$("#continue_btn").click(function(){
    if($('#myForm input:text[value=""]').length > 0){
      alert("yes");
    } else {
      alert("no")
    }
}

4 个解决方案

#1

All you have to do is to wrap your markup in a form element and to each input add attr required this is pure css.

您所要做的就是将标记包装在表单元素中，并将每个输入添加attr，这是纯css。

DEMO ON JSFIDDLE

function highlight(event)
{
    event.preventDefault();
    alert('Done!!!');
    return false;

}

var highlightForm = document.querySelector("form#myForm");
highlightForm.addEventListener('submit',highlight , false);

/**
$("#continue_btn").click(function(){
    if($('#myForm input:text[value=""]').length > 0){
      alert("yes");
    } else {
      alert("no")
    }
}
*/

                       

<form id="myForm">
  <div class="myF">
    <div class="input-group">
      <span class="input-group-addon"><input type="radio" name="radioGroup" id="radio1" value="option1" required></span>
          <input class="form-control" value="Fruits" autofocus required />
    </div>

    <div class="input-group">
      <span class="input-group-addon"><input type="radio" name="radioGroup" id="radio2" value="option2" required></span>
          <input class="form-control" value="Vegitables" required/>
    </div>         
  </div>    
<div class="input-group">
    <span class="input-group-addon quotationFields">City</span><input type="text" class="form-control numericOnly" id="weight_oq" name="weight_oq" required/>
				    </div>
    
  <div class="input-group onlineQuoteForm">
    <span class="input-group-addon">Type </span>
    <select class="form-control" id="ptype_oq" required>
    <option value="">Please selelct</option>
      <option value="Satisfatory">Documents</option>
        <option value="val1">OPtion 1</option>
        <option value="val2">OPtion 2</option>
    </select>
  </div>
      <input type="submit" value="Continue"  id="continue_btn" class="btn btn-primary"/>
</form>

Now you can style it using this

现在你可以使用它来设置它的样式

input:required:focus { 

} 
input:required:hover { 

}
/**--------VALID----------*/
input[type="text"]:valid, 
input[type="name"]:valid, 
input[type="password"]:valid, 
input[type="email"]:valid { 

} 
input[type="text"]:valid:focus,
input[type="name"]:valid:focus, 
input[type="password"]:valid:focus, 
input[type="email"]:valid:focus { 

}
input[type="text"]:valid:hover,
input[type="name"]:valid:hover, 
input[type="password"]:valid:hover, 
input[type="email"]:valid:hover { 

}

/**---------INVALID---------*/
input[type="text"]:invalid, 
input[type="name"]:invalid, 
input[type="password"]:invalid, 
input[type="email"]:invalid { 

} 
input[type="text"]:invalid:focus,
input[type="name"]:invalid:focus, 
input[type="password"]:invalid:focus, 
input[type="email"]:invalid:focus { 

} 
input[type="text"]:invalid:hover,
input[type="name"]:invalid:hover, 
input[type="password"]:invalid:hover, 
input[type="email"]:invalid:hover { 

} 

/**---------REQUIRED---------*/
input[type="text"]:required,
input[type="name"]:required, 
input[type="password"]:required, 
input[type="email"]:required { 

} 

/**---------OPTIONAL---------*/
input[type="text"]:optional,
input[type="name"]:optional, 
input[type="password"]:optional, 
input[type="email"]:optional { 

} 
input[type="text"]:optional:focus,
input[type="name"]:optional:focus, 
input[type="password"]:optional:focus, 
input[type="email"]:optional:focus { 

} 
input[type="text"]:optional:hover,
input[type="name"]:optional:hover, 
input[type="password"]:optional:hover, 
input[type="email"]:optional:hover { 

}

#2

The main difficulty here is radio buttons which you need to check separately. Try something like this:

这里的主要困难是单选按钮，您需要单独检查。尝试这样的事情：

var $form = $('#myForm');

$("#continue_btn").click(function () {

    var $radio = $form.find(':radio:checked');

    var hasEmpty = $.grep($form.serializeArray(), function(el) {
        return !$.trim(el.value);
    }).length || $radio.length == 0;

    if (hasEmpty) {
        alert("yes");
    } else {
        alert("no")
    }
});

Demo: http://jsfiddle.net/tq3jL2d6/9/

Note, that for this demo I improved HTML a little:

请注意，对于此演示，我稍微改进了HTML：

1. wrapped everything with form tag, since you deal with form
2. 用表格标签包装所有东西，因为你处理表格
3. added name attributes to all form elements
4. 为所有表单元素添加了名称属性
5. added placeholder attributes.
6. 添加了占位符属性。

#3

You can use this code, here is the link

您可以使用此代码，这里是链接

http://jqueryvalidation.org/files/demo/

And here is the code

这是代码

view-source:http://jqueryvalidation.org/files/demo/

#4

You can use filter function which can filter every value in form like this

你可以使用过滤功能，它可以过滤这样的形式的每个值

$("#continue_btn").click(function(){
   var anyFieldIsEmpty = $("#myForm input,select").filter(function() {
       return $.trim(this.value).length === 0;
   }).length > 0;
   if(anyFieldIsEmpty){
      alert("yes");
   } else {
      alert("no")
   }

});

}）;

you can select multiple form elements like i have done input,select,textarea etc..

你可以选择多个表单元素，比如我已完成输入，选择，textarea等。

FIDDLE DEMO

FIDDLE DEMO