I have no idea on how to do this so here it goes. What I need is to be able to just validate for empty fields the with no display none;. I am using prototype.
new.onclick = function() {
if (document.getElementById("ticket").style.display !== "none" &&
document.getElementsByTagName("input").length === 0) {
alert('need to have something here');
}
alert('need here');
};
i think you need to use your if statement this way:
if (document.getElementById("ticket").style.display !== "none" || document.getElementsByTagName("input").length === 0)
so it will be true if no input is added to the DOM or ticket is display: none
anyway if you dont have an Element with ID ticket, your script will be abortet
if(document.getElementById("ticket") != null) {
...
}
I'm trying to call a function only if an HTML element is empty, using jQuery.
Something like this:
if (isEmpty($('#element'))) {
// do something
}
if ($('#element').is(':empty')){
//do something
}
for more info see http://api.jquery.com/is/ and http://api.jquery.com/empty-selector/
EDIT:
As some have pointed, the browser interpretation of an empty element can vary. If you would like to ignore invisible elements such as spaces and line breaks and make the implementation more consistent you can create a function (or just use the code inside of it).
function isEmpty( el ){
return !$.trim(el.html())
}
if (isEmpty($('#element'))) {
// do something
}
You can also make it into a jQuery plugin, but you get the idea.
I found this to be the only reliable way (since Chrome & FF consider whitespaces and linebreaks as elements):
if($.trim($("selector").html())=='')
White space and line breaks are the main issues with using :empty selector. Careful, in CSS the :empty pseudo class behaves the same way. I like this method:
if ($someElement.children().length == 0){
someAction();
}
!elt.hasChildNodes()
Yes, I know, this is not jQuery, so you could use this:
!$(elt)[0].hasChildNodes()
Happy now?
jQuery.fn.doSomething = function() {
//return something with 'this'
};
$('selector:empty').doSomething();
If by "empty", you mean with no HTML content,
if($('#element').html() == "") {
//call function
}
In resume, there are many options to find out if an element is empty:
1- Using html:
if (!$.trim($('p#element').html())) {
// paragraph with id="element" is empty, your code goes here
}
2- Using text:
if (!$.trim($('p#element').text())) {
// paragraph with id="element" is empty, your code goes here
}
3- Using is(':empty'):
if ($('p#element').is(':empty')) {
// paragraph with id="element" is empty, your code goes here
}
4- Using length
if (!$('p#element').length){
// paragraph with id="element" is empty, your code goes here
}
In addiction if you are trying to find out if an input element is empty you can use val:
if (!$.trim($('input#element').val())) {
// input with id="element" is empty, your code goes here
}
Empty as in contains no text?
if (!$('#element').text().length) {
...
}
Another option that should require less "work" for the browser than html() or children():
function isEmpty( el ){
return !el.has('*').length;
}
You can try:
if($('selector').html().toString().replace(/ /g,'') == "") {
//code here
}
*Replace white spaces, just incase ;)
document.getElementById("id").innerHTML == "" || null
or
$("element").html() == "" || null
Vanilla javascript solution:
if(document.querySelector('#element:empty')) {
//element is empty
}
Keep in mind whitespaces will affect empty, but comments do not. For more info check MDN about empty pseudo-class.
if($("#element").html() === "")
{
}
Are you looking for jQuery.isEmptyObject() ?
http://api.jquery.com/jquery.isemptyobject/
Here's a jQuery filter based on https://stackoverflow.com/a/6813294/698289
$.extend($.expr[':'], {
trimmedEmpty: function(el) {
return !$.trim($(el).html());
}
});
JavaScript
var el= document.querySelector('body');
console.log(el);
console.log('Empty : '+ isEmptyTag(el));
console.log('Having Children : '+ hasChildren(el));
function isEmptyTag(tag) {
return (tag.innerHTML.trim() === '') ? true : false ;
}
function hasChildren(tag) {
//return (tag.childElementCount !== 0) ? true : false ; // Not For IE
//return (tag.childNodes.length !== 0) ? true : false ; // Including Comments
return (tag.children.length !== 0) ? true : false ; // Only Elements
}
try using any of this!
document.getElementsByTagName('div')[0];
document.getElementsByClassName('topbar')[0];
document.querySelectorAll('div')[0];
document.querySelector('div'); // gets the first element.
Try this:
if (!$('#el').html()) {
...
}
Line breaks are considered as content to elements in FF.
<div>
</div>
<div></div>
Ex:
$("div:empty").text("Empty").css('background', '#ff0000');
In IE both divs are considered empty, in FF an Chrome only the last one is empty.
You can use the solution provided by #qwertymk
if(!/[\S]/.test($('#element').html())) { // for one element
alert('empty');
}
or
$('.elements').each(function(){ // for many elements
if(!/[\S]/.test($(this).html())) {
// is empty
}
})
I'm getting an error for "Object Expected" - the error points to the first If... from everything I read about checkboxes (checkboxes never work for me) and what I read about multiple conditionals, this is right? Even though it isn't...
var lucy = window.document.alice
if (lucy.ch1.checked != "true" && lucy.ch2.checked != "true" && lucy.ch3.checked != "true" && lucy.ch4.checked != "true")
{
alert('Atleast one box must be checked');
}
if (lucy.skeletor.value = "no")
{
alert('Default Option is not a valid selection.');
}
You don't need the lucy.ch1.checked != "true" part. Just say if (!lucy.ch1.checked && !lucy.ch2.checked && ...). Furthermore use if, not If, javascript is case sensitive. Your code is a guarantee for failure, so maybe you want it to rewrite it to something like:
var lucy = document.alice; //a form of some kind?
if (!lucy.ch1.checked && !lucy.ch2.checked
&& !lucy.ch3.checked && !lucy.ch4.checked)
{
alert('At least one box must be checked');
}
if (lucy.skeletor.value === "no")
{
alert('Default Option is not a valid selection.');
}
Try
if (!(lucy.ch1.checked || lucy.ch2.checked || lucy.ch3.checked))
Javascript is case sensitive - you need to use if()
Update: here is a how I would validate a form (I would not likely call the obejct lucy, but here you go):
function validate(lucy) {
if (!lucy.ch1.checked && !lucy.ch2.checked && !lucy.ch3.checked && !lucy.ch4.checked) {
alert('At least one box must be checked');
return false;
}
if (lucy.skeletor.value = "no") {
alert('Default Option is not a valid selection.');
return false;
}
return true;
}
<form onsubmit="return validate(this)">
It's because you have "" around true. In this case true is not a string, it's a boolean value, and you can just write true in stead.
You can make it even more simple by useing KooiInc's answer.
I'm trying to pick out the value of an input box using jquery.
No probs there
$('#id_of_my_input_box_1').val();
But I need several so decided to put them into a loop:
============
var config_total_instances = '==some value='
for (var x = 1; x <= config_total_instances; x++) {
if (isset($('#id_of_my_input_box_'+x).val())) {
alert($('#id_of_my_input_box_'+x).val());
}
}
============
If I submit the form and I've got say 10 input boxes, the code above doesn't alert a value if the relevant input box has value.
I'm using a function below to check for values.
============
function isset(my_variable) {
if (my_variable == null || my_variable == '' || my_variable == undefined)
return false;
else
return true;
}
============
Am I missing something vital..? :-(
Addition: I shoudl add that I'm askign why I don't get the value of
$('#id_of_my_input_box_'+x).val()
echoed out in my alert box
Extending #Faber75's answer. You can set a class name for all your text element and then use something like this
$("input:text.clsname").each(function(){
if (isset(this.value)) {
alert(this.value);
}
});
In your current code if you are assigning a string to config_total_instances then it will not work.
don't consider my message an answer, more of a tip.
For a simplier code you could consider adding a class to the textboxes you need to check.
For example adding to all the inputs you need to check the class="sample" you could the use the jquery selector $(".sample") , returning you all the items and then you could simply do
$(".sample").length to count the items and $(".sample")[0].val() (or similar) to get/test values.
Cheers
Have you tried this? (note that there are three =)
if (my_variable === null || my_variable == '' || my_variable === undefined)
As an alternative to this try
if (typeof(my_variable) == 'null' || my_variable == '' || typeof(my_variable) == 'undefined')
Maybe I'm misunderstanding, but can't you just get all the <input>'s in a <form> that aren't :empty if that's the end goal of what you're trying to accomplish?
$('form#some_id input:not(:empty)').each(function () {
// do something with $(this).val() now that you have
// all the non-empty <input> boxes?
});
Or if you're just trying to tell if the user left some <input> blank, something like:
$('form#some_id').submit(function (e) {
if ($(this).find('input[type="radio"]:not(:checked), input[type="text"][value=""], select:not(:selected), textarea:empty').length > 0) {
e.preventDefault(); // stops the form from posting, do whatever else you want
}
});
http://api.jquery.com/category/selectors/form-selectors/
I have added some javascript in html page for input validation.same page is working correct in IE and chrome but in mozila its not working.The problem is when user inputs invalid data its supposed to show alert msg box and when user clicks OK it should return false to form...BUT mozila is not waiting for alert box it just shows alert box for 5-6 sec and then goes to next page defined in form action="nextpage.php"
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(oldpassword, "<b>Error: </b>Please enter the Old Password!") == false)
{ changeColor("oldpassword"); return false; }
else if (valid_length(newpassword, "<b>Error: </b>Please enter the New Password!!") == false)
{newpassword.value=""; changeColor("newpassword"); return false; }
else if (valid_length(cnfpassword, "<b>Error: </b>Please enter the Confirm Password!!") == false)
{cnfpassword.value=""; changeColor("cnfpassword"); return false; }
else if (document.getElementById('newpassword').value != document.getElementById('cnfpassword').value)
{changeColor("newpassword");cool.error("<b>Error: </b>Passwords entered are not same!");
newpassword.value="";cnfpassword.value="";return false;}
}
}function validate_required(field, alerttxt)
{
with (field)
{
if (value == null || value == "")
{
cool.error(alerttxt);return false;
}
else
{
return true;
}
}
}
cool.error is nothing but CSS nd Js for alert box.I thing there is not any problem in my code weather problem is in some browser settings.Is it so??? because it is working fine in IE and Chrome.
You're using a non-standard IE-only behavior that creates global variables for every element with an ID.
To fix it, add a global variable for each element that you use:
var oldpassword = document.getElementById("oldpassword");
Also, you should never use Javascript's with block.
It is very different from VB's with block, and should not be used unless you truly understand its pitfalls and shortcomings. It will also slow down your code.
You could also use some javascript library to get past browser issues. I'm rooting for jQuery.