I am able to validate all fields within a div but I only want to validate specific fields. Here is a jsfiddle to show what I mean Once validation is passed the div is hidden. I have to enter data in all of the fields so if you check 'Yes' from the checkbox you will see a input field appear I don't want to include that and also if you select 'NoGame' from the dropdownlist once you enter data in all the fields apart from the two fields in the lower div (green border) and click the Test1 button you will see what I mean. Any suggestions?
This is the code which validates all fields and then Hides the div, which can also be seen in the fiddle
function IsValid(divid) {
var $div = $('#' + divid);
var result = true;
$.each($div.find("input[type='text']"), function (i, input) {
if ($(input).val().length == 0 || $.trim($(input).val()) == '') {
result = false;
return;
}
});
return result;
}
$(document).ready(function(){
$("#hide").click(function(){
if (IsValid('contentone')) {
$('#contentone').hide();
};
});
});
Input fields of type text that you don't want to validate exclude them from the validation process
function IsValid(divid) {
var $div = $('#' + divid);
var result = true;
var excludeElement = ["reason"]; //<-- EXCLUDED ELEMENTS IDS
$.each($div.find("input[type='text']"), function (i, input) {
if ($.inArray($(input).attr('id'), excludeElement) < 0 && ($(input).val().length == 0 || $.trim($(input).val()) == '')) {
result = false;
return;
}
});
return result;
}
Related
Here's my code
$('.f1 .btn-next').on('click', function() {
var parent_fieldset = $(this).parents('fieldset');
var next_step = true;
// navigation steps / progress steps
var current_active_step = $(this).parents('.f1').find('.f1-step.active');
var progress_line = $(this).parents('.f1').find('.f1-progress-line');
// fields validation
parent_fieldset.find('input[type="text"], select').each(function() {
if( $(this).val() == "" ) {
$(this).addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
}
});
// fields validation
Its a kind of Validation which i'm using in my Multi-step Form, here the input text field validation is working perfectly but for Select/Checkbox/Radio, its not working, Please help me to fix the code.
I already tried this code but it's not working for select field -
parent_fieldset.find('input[type="text"], select', '.sys').each(function() {
You're saying that you only want inputs whose type is text, so that's what you're getting. If you want every type of input, just take the type specification away from the selector, like this:
parent_fieldset.find(':input').each(function() {
}
Edit: the jQuery :input extension will include select elements, while input will not. The jQuery doc is here.
Try the following code.
parent_fieldset.find(':input').each(function() {
//Your code goes here.
}
//Try this one another way to validate form fields
var allFormData = $('#myForm').serializeArray();
for(var dataIndex = 0 ; dataIndex < allFormData.length ; dataIndex++){
if(allFormData[dataIndex].value == ""){
$("#myForm input[name="+allFormData[dataIndex].name+"]").addClass("input-error");
}else{
$("#myForm input[name="+allFormData[dataIndex].name+"]").removeClass('input-error');
}
}
So this is my final code which works perfectly with all select, radio, checkbox fields
parent_fieldset.find('input[type="text"], select', '.sys').each(function(key, value) {
I have a search box that filters results and hides them if they don't match the filter:
$('#box_street').keyup(function() {
var valThis = $(this).val().toLowerCase();
if (valThis == "") {
$('#street__list > .list__item').show();
} else {
$('#street__list > .list__item').each(function() {
var text = ($(this).text() + $(this).data("alt")).toLowerCase();
if (text.indexOf(valThis) >= 0) {
$(this).show()
} else {
$(this).hide();
}
});
};
});
Now, I added a function that clear the search box with $('.search__filter').val(''); The problem is, once that runs the items that were previously hidden don't show again. The form input resets ok, but the items are still hidden.
How can I show them all again?
Once the search input is empty, all you have to do is trigger the keyup event, as you already have a condition that shows all the elements
$('#reset_button').on('click', function() {
$('.search__filter').val('');
// reset form ... then
$('#box_street').trigger('keyup');
// or you could do it yourself directly with :
// $('#street__list > .list__item').show();
});
I have a form where I'm using twitter typehead & the problem is whenever twitter typehead loads it creates another input field that is blank ¬ shown to user
Now i have this function to validate all inputs
var fields = $('#second_step input[type=text]');
var error = 0;
if (!$("input[name='career']:checked").val()) {
alert('Please Select yes or no'); return false;
}
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if (!$('#reg').valid()) {
return false;
}
Now due to that typehead input whic has no name or id it just have a certain class tt-hint & this input is read only how can i just skip this input from my above validation?
You can use jQuery's NOT function.
var fields = $('#second_step input[type=text]').not('.tt-hint');
You can filter out the fields with:
var fields = $('#second_step input[type=text]:not(.tt-hint)');
Your input has typeahead applied by using a class selector .typeahead.
So in your case you could use the :not pseudo-class selector to filter them out:
var fields = $('#second_step input[type=text]:not(.typeahead)');
That way you skip the typeahead fields.
Personally I would ignore disabled fields, since the user cannot correct them if there is an error. You say the input is read only so that would seem to correlate.
$('#second_step input[type=text]').filter(function(){ return !this.disabled; })
Try this :
fields.each(function(){
var value = $(this).val();
if($(this).hasClass('tt-hint') {
$(this).addClass('valid');
} else {
if( value.length<1 || value==field_values[$(this).attr('id')]) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
}
});
if (!$('#reg').valid()) {
return false;
}
I have a table with five input text for filters as showing in this jsfiddle
https://jsfiddle.net/607y6qdx/2/
I want to filter the information in the table whenever there is a text inside one of these filters and when the users clicks enter.
i already simulated the enter click like this:
$(document).ready(function () {
$('#transactionIDFilter, #messageTypeFilter, #timestampFilter, #messageTextFilter, #originFilter, #destinationFilter ')
.keypress(function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
alert('Oh boy');
return false;
}
});
});
but i couldn't filter the rows.
could you help me please. i am new to js
So the logic you need to follow is
Fetch the value of the input field and get the index of the input
field in which user has pressed enter.
Traverse across all the
Pick td of the index fetched from the firt step.
If the typed value exists in the fetched td then show the entire row or else hide the entired row.
Here is the code which may help:
$(
'#transactionIDFilter, #messageTypeFilter, #timestampFilter, #messageTextFilter, #originFilter, #destinationFilter')
.keypress(function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
$val = $(this).val();
$el = $(this).closest("td");
var index = $("td").index($el);
$("tr").not(".fixed").each(function () {
$elinner = $(this).find("td").eq(index);
if ($elinner.html().indexOf($val) != -1) {
$(this).show();
} else {
$(this).hide();
}
});
return false;
}
});
https://jsfiddle.net/607y6qdx/7/
I ve got numérous checkboxes in my page, each time I click a checkbox, I get the id im interested in and I fill a hidden form. My script is working but if I unclick the checkbox, it should delete the id from the hidden field (right now it appends again the id in the hidden field). How can I writte such a script ? Here's my code so far:
$(document).ready(function() {
var string = "";
$('.checkbox').on('change', function() {
var subscription_id = $(this).parent().attr('id');
if(string == "") {
string = subscription_id;
} else {
string = string + ", " + subscription_id;
}
$('#select_players').val(string);
$('#subscription_ids_export').val(string);
})
})
You can simplify this by retrieving only the subscription_id values from checkboxes which are checked instead of adding/removing values each time.
Try this:
$('.checkbox').on('change', function() {
var subscriptionIds = $('.checkbox:checked').map(function() {
return $(this).parent().prop('id');
}).get().join(',');
$('#select_players').val(subscriptionIds);
$('#subscription_ids_export').val(subscriptionIds);
})
Example fiddle