在jQuery中检查DIV输入项值是否为空 [英] Check a DIV for input item values are not empty in jQuery

问题描述

我在DIV中堆叠了一些输入文本字段，下拉列表，无线电gruop。现在我如何检查这个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?

我在 JSFiddle

jQ：

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

推荐答案

您所要做的就是将您的标记包装在<$ c $中c>表单元素和每个输入添加attr 必需
这是纯css。

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.

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 { 

}

这篇关于在jQuery中检查DIV输入项值是否为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！