javascript - 检查输入项值的 DIV 在 jQuery 中不为空

Question

我在 DIV 中堆叠了一些输入文本字段、下拉菜单和单选按钮组。现在如何检查此 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 { 

}