So I have built some validation in Javascript and when a field has an error the div <div class="form-group">...</div> becomes <div class="form-group has-error">...</div>
I then have a .btn-bar div that contains the button for submitting the form. I have this hidden by default when the page loads:
$(document).ready(function(){
$('.registration-information').hide();
$('.btn-bar').hide();
});
I have a function to show the .btn-bar:
function enableButtons(){
if(noErrors){
$('.btn-bar').slideDown();
}
}
Now obviosuly, the script above doesn't work. More specifically, the if statement. My question, is how do I search for a div that has has-error in the class name on the page? If there is one then the btn-bar does not show, if there isn't any then the btn-bar shows.
It's actually fairly simple in jQuery. Try something like this:
function noErrors() {
return $('.has-error').length == 0;
}
function enableButtons(){
if(noErrors()){
$('.btn-bar').slideDown();
}
}
I separated noErrors() into its own function, in case there are other validation tests you eventually want to add in that aren't related just to the .has-error class.
Good luck!
You can achieve this simply by doing this :
$(document).ready(function(){
$('.registration-information').hide();
$('.btn-bar').hide();
if (!$('.has-error')) {
$('.btn-bar').slideDown();
}
});
It will check to see if any element has the class .has-error , and if it does not ! exist anywhere on the page, it will show the .btn-bar.
Related
I am working on a wordpress website in which I am adding class when h1 elements are empty (as shown below) meaning when there is no content inside .featured-block__tag and
.featured-block__title classes.
<h1 class="featured-block__title"></h1>
<h1 class="featured-block__tag"></h1>
Here is the logic I have used in jQuery:
jQuery(function($) {
if ($(".featured-block__title").is(":empty")) {
$(".img-fit").addClass("opacity-pointeight");
}
})
The above code only works when there is no content inside .featured-block__title class.
Problem Statement
I am wondering what changes I need to make in the code above so that it checks both
for .featured-block__tag and .featured-block__title classes.
Also, .featured-block__tag show ::before selector when there is no content inside it.
Why don't you use $(".featured-block__title").html() === "" instead of checking for is(":empty")?
I think it makes much more sense, and you wouldn't have any problem with :before
Try it like this:
$(function() {
if($(".featured-block__tag").html() === "" &&
$(".featured-block__title").html() === "") {
$(".img-fit").addClass("opacity-pointeight");
}
})
I am trying to replace the class of a div with Javascript. I have looked at some posts but it did not seem to help (e.g. Change an element's class with JavaScript). I have a straightforward innerHTML
document.getElementById("colored-title").innerHTML = "Add comments";
HTML is straightforward as well and it works when there is no condition on the class
<div id="colored-title"></div>
I tried many options (I listed them all below) but none of them seems to work.
if (array[current][5] == 4) {
document.getElementById("colored-title").addClass("green-text");
document.getElementById("colored-title").className= "green-text";
document.getElementById("colored-title").className+= "green-text";
document.getElementById("colored-title").setAttribute=("class","green-text");
} else {
// other format
}
document.getElementById("colored-title").innerHTML = "Add comments";
You can add classname throught javascript by .classname='classname'
This should work.check your if condition to see why it is not working
window.onload = function() {
document.getElementById("colored-title").className= "green-text";
}
.green-text {
color: green;
}
<div id="colored-title">
hello
</div>
Hope it helps
If you have jQuery in your project, then setAttribute should look like this:
$("#colored-title").attr("class", "green-text");
You have to use the jQuery selector, not document.getElementById.
Edit: Worth noting, the .attr method can also set multiple things at once:
$("#thing").attr({class:"green-text", title:"green-Object", id:"green-Id"});
This statement will add the correct class to your div:
document.getElementById("colored-title").className= "green-text";
But with the following statement you are changing the class from "green-text" to "green-textgreen-text":
document.getElementById("colored-title").className+= "green-text";
If you have jQuery in your project, then
$("#elem").addClass("myClass");
.myClass {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="elem">
Text
</div>
I have some fields with class="required" which has custom css.
When i submit the form, i see an custom error message which aplies the required fields the css:
$(".required").addClass('required-fields');
Now, when i complete some fields (not all required) and i submit again de form, maybe what i need to see is: in the fields which have data (not empty), should go another css. Like border green or something like that.
Is it possible to do with a for maybe?
You could try something like this:
$('.required').removeClass('ok').filter(function(){
return !!$(this).val();
}).addClass('ok');
It filters all required fields with a value and adds class 'ok';
http://jsfiddle.net/cHPS2/
You can check if the input has a value. For example if($("#nameInput).value) will be true if its not blank. You can add a class to those inputs.
for(var i=0;i<inputs.length;i++){
if(inputs[i].value){
//enter add class code here
}
}
You have to pass on every input with a Jquery selector like
var $fields = $('.field');
And check if the field is required or not and if a value is given or not like :
$fields.each(function ($field) {
if ($field.hasClass('required') && !$field.value) {
$field.addClass('required-fields');
}
else {
$field.addClass('green-fields');
}
});
It's a rapid draft :)
Form validation with user feedback is a sufficiently common requirement that you may wish to consider using a plugin rather than coding a custom solution (reinventing the wheel) each time:
http://jqueryvalidation.org/documentation
You may try something like following (Can't be more pecific because you didn't provide HTML):
$('.required').not('[value=""]').css(...);
Using css() you may change the look of your elements.
Update:
To add a class to them try this:
$('.required').not('[value=""]').addClass('className');
To remove a class and then add another class (Also you may use toggleClass) try this:
$('.required').not('[value=""]').removeClass('className').addClass('className');
An Example.
Try this:
$('input.required:text').filter(function() {
return $(this).val() == "";
}).css(...);
I have an input box for zip code entry's, when a user inputs a zip code I want to show a specific DIV.
It starts with everything hidden except for the input box and go button, then the user enters a zip code and the matching DIV shows (the DIV ID will be the zip code) There maybe hundreds of DIVs and possible inputs.
Here is what I have so far, note it starts showing everything (not what I want) but it kinda works
$(document).ready(function(){
$("#buttontest").click(function(){
if ($('#full_day').val() == 60538) {
$("#60538").show("fast"); //Slide Down Effect
$("#60504").hide("fast");
}
else {
$("#60538").hide("fast"); //Slide Up Effect
$("#60504").show("500");
}
});
$("#full_day").change(function() {
$("#60504").hide("500");
$("#60538").show("500");
});
});
LINK to working File http://jsfiddle.net/3XGGn/137/
jsFiddle Demo
Using pure numbers as id's is what was causing the issue. I would suggest you change them to
<div id="zip60538">
Welcome to Montgomery
</div>
<div id="zip60504">
<h1>Welcome to Aurora</h1>
</div>
In the html (as well as in the css and the js as can be seen in the linked fiddle)
This will allow them to be properly referenced in the DOM
edit
jsFiddle Demo
If you had a lot of these to handle, I would probably wrap the html area in a div to localize it and then use an array to store the accepted zip codes, and make use of both of those approaches in the click event
$(document).ready(function(){
var zipCodes = [60538,60504];
$("#buttontest").click(function(){
var zipIndex = zipCodes.indexOf(parseInt($("#full_day").val()));
$("#zipMessage > div").hide("fast");
$("#zip"+zipCodes[zipIndex]).show("fast");
});
});
Start off with all the div's style of display: none;. On your button click simply check that a div exists with that ID, if so, hide all others (use a common class for this) and show the right one:
$("#buttontest").click(function() {
var zip = $("#full_day").val();
if ( $("#" + zip).length ) {
$(".commonClassDiv").hide();
$("#" + zip).show();
}
});
At the moment I have a tiered list of div boxes each holding a title. At the beginning of each title there is a - sign which when clicked hides or displays everything tiered under that div in javascript with a link.
My problem is I'd like to change it over to JQuery but don't really know where to start. I've got jquery running on the page as I've done $(document).ready(function(){alert("fubar");}); and it alerts correctly, but I don't know where to go from there.
The link on the - sign currently has an onclick function of ShowHideStuff(ChildrenOf[IDValue]) and then the div box it hides/displays is called ChildrenOf[IDValue].
Here is the javascript I'm currently using:
function ShowHideStuff(id){
if(document.getElementById(id).style.display == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}
}
Do you want do the same using jQuery?
Try this:
function ShowHideStuff(id){
$('#'+id).toggle();
}
Can I suggest first having a look at some of the jQuery docs, they're there for a reason.
http://docs.jquery.com/Main_Page
But for your problem, you need a selector for each '-' sign, which could look like this $('.minus') . Which selects any element with class='minus' (you would have to add the minus class to each '-' element.
The code would then be:
$('.minus').click(function(){
ShowHideStuff(ChildrenOf[IDValue]);
});