We Keep Coding

Javascript - check if serialized form is empty

I'm trying to check if the form inputs are all empty. It works fine when any input has value (returns true) but doesn't return false when input gets empty again.
var data;
$('form :input').on('input', function() {
data = $('form').serialize();
console.log(data.indexOf('=&') > -1)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" name="in-1" />
<input type="text" name="in-2" />
<input type="text" name="in-3" />
<input type="text" name="in-4" />
<input type="text" name="in-5" />
<input type="text" name="in-6" />
<input type="text" name="in-7" />
<input type="text" name="in-8" />
</form>

(data.indexOf('=&') > -1
will return true when at least one of the fields is blank - you're checking for the existence of the =&, and as soon as one field is blank, this string will exist. However, relying on the serialised version of the data is a bit of a hack anyway IMHO. Much better to check the inputs directly:
$('form :input').on('input', function() {
var allBlank = true; //assume they're all blank until we discover otherwise
//loop through each of the inputs matched
$('form :input').each(function(index, el)
{
if ($(el).val().length != 0) allBlank = false; //they're not all blank anymore
});
console.log(allBlank);
});

var serialized = $(form).serialize();
if(serialized.indexOf('=&') > -1 || serialized.substr(serialized.length - 1) == '='){
//you've got empty values
}
Using jQuery, you can test it before serializing:
$(form).find('input').each(function(index, elem){
if($(elem).val().length == 0){
//this field is empty
}
});

data.split('&').every(e => { return e.indexOf('=') === (e.length - 1); })

jQuery check value of every input in a given div

I have the following validation script I'm trying to get working:
function validate(id){
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var input = $("." + id + "-calc input[type='text']").val();
if (input == ""){
alert("You must fill in all items on the form");
}
}
It is passed an ID (the ID is a div that wraps around these specific elements) and then I would like it to check every input of type text within the div=ID
At present, this code works only for the first input in the HTML. If it's unfilled, the alert appears. Once you fill it, the alert will no longer appear. But it doesn't then check the NEXT text input in the DOM.
Some example HTML
<div class="dontknow-calc">
<label>My materials cost</label><input type="text" name="materialcost" id="materialcost" /><br />
<label>My packing materials cost</label><input type="text" name="packingmaterialcost" id="packingmaterialcost" /><br />
<div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
I expect it needs a foreach loop to run through every text element but I'm not sure how.
JSFiddle

Try this:
function validate(id){
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var div = $("." + id + "-calc");
$(div).find("input[type = 'text']").each(function() {
if(this.value == "") {
alert("You must fill in all items on the form");
return false;
}
});
}

You can use .each() for this:
function validate(id)
{
$("." + id + "-calc input[type='text']").each(function()
{
if (this.value == "")
{
alert("You must fill in all items on the form");
return false;
}
});
}

I think what you are trying to do is to give an alert if any of the input fields are empty, in that case use .filter() to find out if any of the inputs are empty if any input is empty then show the alert
$(".btnCalc").click(function() {
var id = this.id;
var valid = validate(id);
console.log(valid)
});
function validate(id) {
// checks only inputs with type "text" inside div id-calc
// e.g #haveprice-calc or #dontknow-calc
var $empties = $("." + id + "-calc input[type='text']").filter(function() {
//may also use .trim() like !this.value.trim();
return !this.value
});
if ($empties.length) {
alert("You must fill in all items on the form");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dontknow-calc">
<label>My materials cost</label>
<input type="text" name="materialcost" id="materialcost" />
<br />
<label>My packing materials cost</label>
<input type="text" name="packingmaterialcost" id="packingmaterialcost" />
<br />
<div class="btn btnCalc" id="dontknow">Calculate</div>
</div>
<br />
<br />
<div class="haveprice-calc">
<label>My other field</label>
<input type="text" name="materiotherfieldalcost" id="otherfield" />
<br />
<div class="btn btnCalc" id="haveprice">Calculate</div>
</div>

Or you could use the jQuery.Validation plugin (see http://jqueryvalidation.org/category/methods/ for some examples), and then use something like this:
$( "#myform" ).validate({
rules: {
field1: {
required: true
}
field2: {
required: true
}
// etc...
}
});

if you want to use each loop you can write some code like this:
$("." + id + "-calc input[type='text']").each(function(index,val){
// for current item value
console.log(val); // to see what's in the val argument
current_item_value = val.value;
});
I hope it helps

jquery each loop check if at least one field has been filled

Let's say that I have an HTML structure like this:
<input type="text" name="input_1" class="required" value="" />
<input type="text" name="input_2" class="required" value="" />
<input type="text" name="input_3" class="required one" value="" />
<input type="text" name="input_4" class="required one" value="" />
<input type="text" name="input_5" class="required" value="" />
As you can see each text field above has the class required but there are two of them that also have the class one. What I wanna do is to iterate over these text fields and check if they are not empty but for the ones that have the class one, at least one of them is required (not both at the same time). If I iterate over the input with class required, how do I check if at least one of the inputs with class one has been filled (within the same loop)? Thank you

You can do:
var oneIsFilled = false;
$(":text.required").each(function() {
if ($(this).hasClass("one") {
if (this.value.length > 0)
oneIsFilled = true;
}
});

These here will additionally cover the checking of the required fields:
Working example see my fiddle: http://jsfiddle.net/Florian_Loch/A3C5C/1/
function click() {
var bool = check();
if (bool) {
alert("OK!");
} else {
alert("NOOOO!");
}
}
function check() {
var one = false;
var res = true;
$(".required").each(function () {
if ($(this).hasClass("one") && this.value.length > 0) {
one = true;
}
if ($(this).hasClass("required") && $(this).hasClass("one") == false && this.value.length == 0) {
res = false;
return; //We can leave here already
}
});
if (!res) {
return false;
}
else {
return one;
}
}
Cheers,
Florian

How to validate if textbox value is empty in a series of textboxes?

There are a series of textboxes like:
<input type="text" class="jq-textBox" />
<input type="text" class="jq-textBox" />
<input type="text" class="jq-textBox" />
<input type="text" class="jq-textBox" />
<input type="text" class="jq-textBox" />
User can fill up the textbox values from top to bottom order. Only first textbox is required and all other textboxes are optional.
Allowed order to fill textbox values:
1st
1st & 2nd
1st, 2nd & 3rd
and likewise in sequence order
Dis-allowed order:
2nd
1st & 3rd
1st, 2nd & 4th
This means that user needs to fill up the first textbox only or can fill up the other textboxes in sequential order. User can NOT skip one textbox and then fillup the next one.
How to validate this in javascript/jQuery?
Any help is highly appreciated!

I would personaly use the disabled html attribute.
See this jsFiddle Demo
html
<form>
<input type="text" class="jq-textBox" required="required" />
<input type="text" class="jq-textBox" disabled="disabled" />
<input type="text" class="jq-textBox" disabled="disabled" />
<input type="text" class="jq-textBox" disabled="disabled" />
<input type="text" class="jq-textBox" disabled="disabled" />
<input type="submit" />
</form>
(Note the required attribute for HTML5)
jquery
$('input.jq-textBox').on('keyup', function(){
var next = $(this).next('input.jq-textBox');
if (next.length) {
if ($.trim($(this).val()) != '') next.removeAttr('disabled');
else {
var nextAll = $(this).nextAll('input.jq-textBox');
nextAll.attr('disabled', 'disbaled');
nextAll.val('');
}
}
})
Also see nextAll() jquery Method
Edit :
If you want to hide the disabled inputs in order to show them only when the previous input is filled, just add this css :
input[disabled] {
display: none;
}
Demo

You can iterate over the list backwards to quickly figure out whether there is a gap.
var last = false,
list = $(".jq-textBox").get().reverse();
$.each(list, function (idx) {
if ($(this).val() !== "") {
last = true;
}
else if (last) {
alert("you skipped one");
}
else if (list.length === idx + 1) {
alert("must enter 1");
}
});
http://jsfiddle.net/rnRPA/1/

Try
var flag = false, valid = true;
$('.jq-textBox').each(function(){
var value = $.trim(this.value);
if(flag && value.length !=0){
valid = false;
return false;
}
if(value.length == 0){
flag = true;
}
});
if(!valid){
console.log('invalid')
}
Demo: Fiddle

You can find all inputs that are invalid (filled in before the previous input) this way:
function invalidFields() {
return $('.jq-textBox')
.filter(function(){ return !$(this).val(); })
.next('.jq-textBox')
.filter(function(){ return $(this).val(); });
}
You can then test for validity:
if (invalidFields().length) {
// invalid
}
You can modify invalid fields:
invalidFields().addClass('invalid');
To make the first field required, just add the HTML attribute required to it.

I think a more elegant solution would be to only display the first textbox, and then reveal the second once there is some input in the first, and then so on (when they type in the second, reveal the third). You could combine this with other solutions for testing the textboxes.

To ensure the data is entered into the input elements in the correct order, you can set up a system which modifies the disabled and readonly states accordingly:
/* Disable all but the first textbox. */
$('input.jq-textBox').not(':first').prop('disabled', true);
/* Detect when the textbox content changes. */
$('body').on('blur', 'input.jq-textBox', function() {
var
$this = $(this)
;
/* If the content of the textbox has been cleared, disable this text
* box and enable the previous one. */
if (this.value === '') {
$this.prop('disabled', true);
$this.prev().prop('readonly', false);
return;
}
/* If this isn't the last text box, set it to readonly. */
if(!$this.is(':last'))
$this.prop('readonly', true);
/* Enable the next text box. */
$this.next().prop('disabled', false);
});
JSFiddle demo.
With this a user is forced to enter more than an empty string into an input field before the next input is essentially "unlocked". They can't then go back and clear the content of a previous input field as this will now be set to readonly, and can only be accessed if all following inputs are also cleared.

JS
var prevEmpty = false;
var validated = true;
$(".jq-textBox").each(function(){
if($(this).val() == ""){
prevEmpty = true;
}else if($(this).val() != "" && !prevEmpty){
console.log("nextOne");
}else{
validated = false;
return false;
}
});
if(validated)
alert("ok");
else
alert("ERROR");
FIDDLE
http://jsfiddle.net/Wdjzb/1/

Perhaps something like this:
var $all = $('.jq-textBox'),
$empty = $all.filter(function() { return 0 === $.trim(this.value).length; }),
valid = $empty.length === 0
|| $empty.length != $all.length
&& $all.index($empty.first()) + $empty.length === $all.length;
// do something depending on whether valid is true or false
Demo: http://jsfiddle.net/3UzHf/ (thanks to Arun P Johny for the starting fiddle).
That is, if the index of the first empty item plus the total number of empties adds up to the total number of items then all the empties must be at the end.

This is what you need :
http://jsfiddle.net/crew1251/jCMhx/
html:
<input type="text" class="jq-textBox" /><br />
<input type="text" class="jq-textBox" disabled/><br />
<input type="text" class="jq-textBox" disabled/><br />
<input type="text" class="jq-textBox" disabled/><br />
<input type="text" class="jq-textBox" disabled/>
js:
$(document).on('keyup', '.jq-textBox:first', function () {
$input = $(this);
if ($input.val()!='')
{
$('input').prop('disabled',false);
}
else {
$('input:not(:first)').prop('disabled',true);
}
});

var checkEmpty = function ()
{
var formInvalid = false;
$('#MyForm').each(function () {
if ($(this).val() === '') {
formInvalid = true;
}
});
if (formInvalid) {
alert('One or more fields are empty. Please fill up all fields');
return false;
}
else
return true;
}

Select at least 1 checkbox in a loop of checkboxes group

I'm trying to get this thing work for a while but I guess I need to tweak the code from somewhere. I thought, someone here could better guide me instead of banging my head to my coding screen :)
here's the actual process:
<input type="hidden" name='oneSelectionChk_1'>
<input type="checkbox" name='awp_group_1' id='id1'>
<input type="checkbox" name='awp_group_1' id='id2'>
<input type="checkbox" name='awp_group_1' id='id3'>
<input type="checkbox" name='awp_group_1' id='id4'>
<input type="hidden" name='oneSelectionChk_2'>
<input type="checkbox" name='awp_group_2' id='id5'>
<input type="checkbox" name='awp_group_2' id='id6'>
<input type="checkbox" name='awp_group_2' id='id7'>
<input type="checkbox" name='awp_group_2' id='id8'>
<input type="hidden" name='oneSelectionChk_3'>
<input type="checkbox" name='awp_group_3' id='id9'>
<input type="checkbox" name='awp_group_3' id='id10'>
<input type="checkbox" name='awp_group_3' id='id11'>
<input type="checkbox" name='awp_group_3' id='id12'>
what I'm using for jQuery is:
var chkFields = $("input[name='oneSelectionChk']");
$.each(chkFields, function(i, field){
var groupID = field.id.split('_'); // Getting the ID of the group
var chkGroupBoxes = $('input[name="awp_group_"'+groupID[1]);
if(field.value==1)
{
//$.each(chkGroupBoxes, function(j, thisChkBox){
//alert(thisChkBox.value + " #"+j);
alert( $('input[name="awp_group_"'+groupID[1]).filter(':checked').length);
if($('input[name="awp_group_"'+groupID[1]+':checked').length > 0 )
{
//$.scrollTo( '#awp_container', 1200 );
alert($('input[name="awp_group_"'+groupID[1]+':checked').length+" Selected ");
//alert( "Class AlertMsgText Should be removed Now");
$("#selectInstruction_"+groupID[1]).removeClass("AlertMsgText");
//return
}
else
{
alert($('input[name="awp_group_"'+groupID[1]+':checked').length+" Still not selected ");
//alert("Please select atleat 1 from Option #"+groupID[1]);
$("#selectInstruction_"+groupID[1]).addClass("AlertMsgText");
$.scrollTo( '#awp_container', 1200 );
//return;
}
//});
}
});
This code always giving me 0 length of checkboxes, I'm not sure if I need to loop through again for each checkbox or this might work?
Any quick help should be appreciated!

Try
var chkFields = $('input[name^="oneSelectionChk"]');
$.each(chkFields, function (i, field) {
var groupID = field.name.replace('oneSelectionChk_', '')
var chkGroupBoxes = $('input[name="awp_group_' + groupID + '"]');
if (chkGroupBoxes.filter(':checked').length == 0) {
alert('please select at least one checkbox under: ' + field.name)
}
});
Demo: Fiddle

There is no element with name attribute of oneSelectionChk in your markup, the hidden inputs have name attributes that start with oneSelectionChk, you have to use attribute starts with selector.
In case that elements are siblings you can select the target elements using .nextUntil() method:
var $hidden = $('input[type=hidden]').filter('[name^=oneSelectionChk]');
$hidden.each(function(){
var $chekboxes = $(this).nextUntil('input[type=hidden]'),
$checked = $checkboxes.filter(':checked'),
$unchecked = $chekboxes.not($checked);
});
Using name attributes:
var $hidden = $('input[type=hidden]').filter('[name^=oneSelectionChk]'),
$checkboxes = $('input[type=checkbox]');
$hidden.each(function() {
var n = this.name.split('_')[1];
var $grp = $checkboxes.filter('[name="awp_group_'+ n +'"]');
// ..
});