Checking inside of the div tag with innerhtml in javascript?

Question

hi fellows im trying to make a registration form with ajax validation check. validation check is OK. i make it show a cross.png image when there is a problem about a field on the form.

but what i wanna do next is to not let visitors apply the registration form when there is problem.

i tried to check for errors by

if(document.getElementById('username_error_icon').innerHTML!='<img src="cross.png" width="15" height="15" />'){
document.form1.submit();    
}

which didnt work :/ im open to suggestion please help :/

Answer 1

The exact innerHTML value of an element isn't something that is constant accross all browser. You shouldn't rely on it. Some browser re-order the attribute order, rewrite the path of the "src".

You should do something along that :

function isValid() {
    // Do your test and return true/false
}

// ...

function functionWhereYourCodeIs() {
    if (isValid()) {
        document.form1.submit();
    }
}

Answer 2

It's not a good idea to validate something like this, comparing two strings which can change.

Instead, I recommend you setting a variable like bErrOccurred = true where you set the source of the image to cross.png and then your if statement should look like the following:

if(!bErrOccurred) {
    document.form1.submit();   
}

Answer 3

but the problem is valid function which also adds

<img src="cross.png" width="15" height="15" />

onto page by sending it to ajax method is in php code. so i dont know how to send both image html code and validation value from one php code

Answer 4

Well in case you still want to do it, you can do this

    <div id="username_error_icon">
        <img id="myValidationImage" src="cross.png" width="15" height="15" />
    </div>

<script type="text/javascript">
    var validationImage = document.getElementById('myValidationImage').src;
    var imageName = validationImage.lastIndexOf('.');
    validationImage = validationImage.substring(validationImage.lastIndexOf('/') + 1, imageName < 0 ? validationImage.length : imageName);
    if (validationImage != "cross")
        document.form1.submit();
    </script> 

Answer 5

ok as it seems i'll need to change the whole ajax code to only get validation result as a variable from php without any html tags etc.

Answer 6

ok problem solved. by changing php code that returns information to ajax code. i changed php code to return validation result without any html tag but with 0 or 1 or 2 etc. and then changed javascript code to do proper changes in html dedicated to these returned values