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

Question

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

我在JSFiddle

中创建了一个简单的模型

JQ：

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

Answer 1

您所要做的就是将标记包装在form元素中，并添加到每个input添加attr required 这是纯粹的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>

现在您可以使用此

设置样式

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 { 

}

Answer 2

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

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")
    }
});

演示：http://jsfiddle.net/tq3jL2d6/9/

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

1. 使用form标记包装所有内容，因为您处理的是表单
2. 为所有表单元素添加名称属性
3. 添加了占位符属性。

Answer 3

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

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

这是代码

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

Answer 4

你可以使用过滤功能，它可以过滤像这样的

形式的每个值

$("#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")
   }

}）;

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

FIDDLE DEMO