Check DIV value for input element values ​​in jQuery is not empty

Question

I put some text input fields, drop-down lists, radio control inside the DIV. Now, how can I check if all text fields, radio groups and drop-down lists have this DIV?

I created a simple layout in JSFiddle

JQ:

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

Answer 1

All you have to do is wrap your markup in the element formand inputadd attr to each of required this purely 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>

Run codeHide result

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 { 

}

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:

• form,
• .

Answer 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/

Answer 4

You can use a filter function that can filter each value in a 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 several form elements, for example, I made an input, select, textarea, etc.

FIDDLE DEMO