how to check the status of css through javascript

Question

I have a JavaScript file that validates if the text-box is filled out or not. I want to make it that if all the text-boxes are all filled out correctly, it should go on to the next page or what ever the case is. (In my case just to display an alert message box.) I would appreciate any answer as soon as possible. Thanks in advance.

HTML

<form name="form" onSubmit="return validate()" method="post">
    <p>
        <label class="tittle">Name:</label>
        <span>
            <input type="text" name="firstname"
                   placeholder="First Name" class="info"
                   size="25" maxlength="25" 
                   onBlur="return validateFirstName()">
            <label class="fillerror" id="fillFirst">
                 First name is required
        </label>
        </span>

        <span>
            <input type="text" name="lastname"
                   placeholder="Last Name" class="info"
                   size="25" maxlength="25"
                   onBlur="return validateLastName()">
            <label class="fillerror" id="fillLast">
                 Last name is required
        </label>
        </span>
    </p>
    <p>
        <input type="button" name="register"
               value="Register" class="register"
               onClick="return validateFirstName(),
               validateLastName(), allValidated();">
    </p>
</form>

JavaScript

function xValidate(inbox, fill)
{
    inbox.style.backgroundColor="rgba(255, 0, 0, .1)";
    inbox.style.borderLeft="3px solid red";
    fill.style.display="block";
}
function yValidate(inbox, fill)
{
    inbox.style.backgroundColor="white";
    inbox.style.borderLeft="3px solid rgb(169, 184, 1)";
    fill.style.display="none";
}


function validateFirstName()
{   
    var frstnm = document.forms["form"] ["firstname"].value;

    var inbox = document.forms["form"] ["firstname"];
    var firstname = document.getElementById("fillFirst");

    if (frstnm==null || frstnm=="" || frstnm==" ")
    {
        xValidate(inbox, firstname);
    }
    else
    {
        yValidate(inbox, firstname);
    }
}   

function validateLastName()
{
    var lstnm = document.forms["form"] ["lastname"].value;

    var inbox = document.forms ["form"] ["lastname"];
    var lastname = document.getElementById("fillLast");

    if (lstnm==null || lstnm=="" || lstnm==" ")
    {
        xValidate(inbox, lastname);
    }
    else
    {
        yValidate(inbox, lastname);
    }

}

This is the function I need help on, all other code here was just for information to understand this last statement:

function allValidated()
{

    var allrGood = document.getElementsByClassName("fillerror");

    if (allrGood.style.display="none" == true)
    {
        alert("They're all good");
    }
    else if (allrGood.style.display="block" == true)
    {
        alert("Something is displayed 'block'");
    }
}

If it doesn't work with an 'if' statement, then maybe it would work with a 'for' or 'while' statement (looping statement) then please show me.

Abijeet Patro · Accepted Answer · 2013-12-05T06:21:34.623

1

First I would really suggest that you start using jQuery. It'll make things quite easy.

Here is a pure JS solution though -

First assign a particular class to all the controls that need to be validated.
On the onchange event of the controls, if the controls are valid, add a certain class say - ctrlValid , else add another class - ctrlInvalid.
Then on the click of the button, get all elements by the class name ctrlInvalid
Check if the length is 0, if it is - redirect, else show message.

If you continue to use your solution then -

var blIsFormValid = true;
for(var i =0; i < allrGood.length; ++i)
{
   if(allrGood[i].style.display != 'none')
   {
       blIsFormValid = false;
       break;
   }
}
if(blIsFormValid)
{
   // Redirect check - http://stackoverflow.com/a/4745622/903324
   window.location = "http://www.yoururl.com";
}
else 
{
   // Show message...
}

edited Dec 05 '13 at 06:21

answered Dec 05 '13 at 05:46

Abijeet Patro

2,842
4
37
64

It is a great answer, but how would I do the 2nd if statement? if(blIsFormValid) { // Redirect } – Dec 05 '13 at 05:57
@user2356557, updated the answer again.. The point of the for loop is that we are getting all the `fillerror` divs, and checking if they are displayed. If even one of them is displayed that means there is an error. – Abijeet Patro Dec 05 '13 at 06:23
Thank you so much!! It finally worked!! Couldn't have done it without you. – Dec 06 '13 at 23:21

score 0 · Answer 2 · answered Dec 05 '13 at 05:49

One problem with your code is document.getElementsByClassName() returns an array of elemets, not just one element. So allrGood.style doesn't quite make sense.

Also, allrGood.style.display="none" assigns "none" to allrGood.style.display instead of comparing them. Remember to use == for a loose comparison or === for a strict comparison.

Using jQuery you can iterate through each label of class fillerror and check to see if it's visible, like so:

function areTheyAllValidated() {
    var valid = true;
    $('label.fillerror').each(function(index, element) {
        if ($(element).is(":visible"))
            valid = false;
    });
    return valid;
}

score 0 · Answer 3 · answered Dec 05 '13 at 05:51

You have to pop a class or ID on your alert control so you can style that sucka.

Something like below should get you in a decent direction. With another bell and whistle for sags.

'SuperCool': function() {
   var sName = document.getElementById('ip1').value;
   Alert.SuperCool( "Thank you "+sName+". Could be expanded to do something a little more clever" );
 }

Example alert styling.

.SuperCool {
   background: red;
   width: 200px;
   height: 100px;
}

how to check the status of css through javascript

3 Answers3