Function to check if an HTML element is not nested in a DIV

[Anjana P]

Hi,

I have a function as below:

function onStartValidation()
{
//For DIV
#indivcount=0;
$divclassarray='';

//For P
#inptagcount=0;
$ptagclassarray='';
}

function onStartTag_div()
{
#indivcount++;
if hasAtt("class")
{
#classindex=getAttIndex("class");
$classvalue=getAttValue(#classindex);
//Methods for DIV

$divclassarray[#indivcount]=$classvalue;
}

function onEndTag_div()
{
$divclassarray[#indivcount]='';
#indivcount--;
}

function onStartTag_p()
{
#inptagcount++;
If hasAtt(“class”)
{
#ptagclassindex=getAttIndex("class");
$ptagclassvalue=getAttValue(#ptagclassindex);

//Methods when <p> has a class
}
else
{
//throw error is <p> tag not inside <div class="abc">
If isValueInArray("divclassarray","abc")<0
{
Message(1,MSG_ERROR,'Text inside <div class="abc" should be inside a <p> tag.');
}

}

function onEndTag_p()
{
$ptagclassarray[#inptagcount]='';
#inptagcount--;
}

The problem I am having with the above code is that if <div class="abc"> is not present in my HTML (and thus not in divclassarray) - it throws error for every <p> tag on the page. However, if there is a <div class="abc"> and the text inside it is not within a <p> tag - I expected the error to be thrown but it did not (So its not even working for what I wrote the method).

I tried modifying the above line to include matchCase("divclassarray","abc") and beginsWithCase("abc","divclassarray")>1 to check whether <div class="abc"> is present or not and then do isValueInArray - but this does not help either.

Basically, what I want to do is check if <p> tag is present inside <div class="abc">, if <div class="abc"> exists.

Hope this makes sense.

Thanks in advance!

-Anjana P

[Anjana P]

An additional query apart from what I have posted above.

If my divclassarray contains a div with class "abc" and I need to check that the div after it (not within it) is of class "xyz". How do I do that? I was tried using #classindex and increment it to get the next DIV but that did not work.

Thanks!

-Anjana P

[Albert Wiersch]

The problem I am having with the above code is that if <div class="abc"> is not present in my HTML (and thus not in divclassarray) - it throws error for every <p> tag on the page. However, if there is a <div class="abc"> and the text inside it is not within a <p> tag - I expected the error to be thrown but it did not (So its not even working for what I wrote the method).

Basically, what I want to do is check if <p> tag is present inside <div class="abc">, if <div class="abc"> exists.

Hope this makes sense.

Hello,

Are you wanting to check that all text that is inside a <div class="abc"> is also contained in a "p" tag? If so, then this should be possible but I think I will have to add another function like onText() that is called whenever there is text encountered in the document. It could then see if the text is in a <div class="abc"> section and if so, then make sure it is in a "p" element. Is this what you'd like to check for?

[Albert Wiersch]

If my divclassarray contains a div with class "abc" and I need to check that the div after it (not within it) is of class "xyz". How do I do that? I was tried using #classindex and increment it to get the next DIV but that did not work.

Hello,

If I understand correctly then you could set a new variable like #nextdivmustbexyz=true in onStartTag_div() when class="abc". In onStartTag_div() you would also check to see if #nextdivmustbexyz is true, and if so, then check to make sure that class="xyz" and, if so, set #nextdivmustbexyz=false. Since you do not want <div class="xyz"> in <div class="abc"> then you'll probably also need to check to make sure you are not in <div class="abc"> when you check if if #nextdivmustbexyz is true...

maybe something like this (not tested so there could be bugs!):

Code: Select all

function onStartValidation() {
 #nextdivmustbexyz=false;
 ... // the rest of the function
}

function onStartTag_div() {
 if hasAtt("class") {
  #classindex=getAttIndex("class");
  $classvalue=getAttValue(#classindex);

  if #nextdivmustbexyz {
   if isValueInArray("divclassarray","abc")<0 { // not in <div class="abc">
    if !matchNoCase($classvalue,"xyz") { Message(1,MSG_ERROR,'Class is not "xyz" when it should be.'); }
    else { #nextdivmustbexyz=false; }
   }
  }

  if matchNoCase($classvalue,"abc") { #nextdivmustbexyz=true; }

  #indivcount++;
  $divclassarray[#indivcount]=$classvalue;
 }
}


[Anjana P]

Hello,

Are you wanting to check that all text that is inside a <div class="abc"> is also contained in a "p" tag? If so, then this should be possible but I think I will have to add another function like onText() that is called whenever there is text encountered in the document. It could then see if the text is in a <div class="abc"> section and if so, then make sure it is in a "p" element. Is this what you'd like to check for?

Hi Albert,
I don't want the dependancy on text. Because there will be multiple texts within <div class="abc"> and I don't require that all of them be inside <p> tag.
However, I do know that there has to be exactly one <p> inside <div class="abc">. So I need to check if <p> is present inside <div class="abc"> and then perhaps check if <p> tag has text or not.

Hope this makes sense.

Thanks!
-Anjana P

[Anjana P]

Hello,

If I understand correctly then you could set a new variable like #nextdivmustbexyz=true in onStartTag_div() when class="abc". In onStartTag_div() you would also check to see if #nextdivmustbexyz is true, and if so, then check to make sure that class="xyz" and, if so, set #nextdivmustbexyz=false. Since you do not want <div class="xyz"> in <div class="abc"> then you'll probably also need to check to make sure you are not in <div class="abc"> when you check if if #nextdivmustbexyz is true...

maybe something like this (not tested so there could be bugs!):

Code: Select all

function onStartValidation() {
 #nextdivmustbexyz=false;
 ... // the rest of the function
}

function onStartTag_div() {
 if hasAtt("class") {
  #classindex=getAttIndex("class");
  $classvalue=getAttValue(#classindex);

  if #nextdivmustbexyz {
   if isValueInArray("divclassarray","abc")<0 { // not in <div class="abc">
    if !matchNoCase($classvalue,"xyz") { Message(1,MSG_ERROR,'Class is not "xyz" when it should be.'); }
    else { #nextdivmustbexyz=false; }
   }
  }

  if matchNoCase($classvalue,"abc") { #nextdivmustbexyz=true; }

  #indivcount++;
  $divclassarray[#indivcount]=$classvalue;
 }
}


Hi Albert,

Thanks for the function. It was great help! I understood what you did. The logic is simple. I will keep this in mind .
I had to modify the function a bit. It is as follows:

Code: Select all

if #nextDiv
{
   if isValueInArray("divclassarray","abc")<0
                {
       [b]if !matchNoCase($classvalue,"xyz")
                    {
                         Message(1,MSG_ERROR,'My Error Message');
                    }

                    #nextDiv=false;[/b]               
               }
}

if matchNoCase($classvalue,"abc")
{
   #nextDiv=true;
}

I have not put #nextDiv=false; inside the else condition. If you put it inside the else condition it throws the error for several other DIVs. We will need to turn the bool to false after every check.

Thanks a lot !

-Anjana P

[Albert Wiersch]

Hi Albert,
I don't want the dependancy on text. Because there will be multiple texts within <div class="abc"> and I don't require that all of them be inside <p> tag.
However, I do know that there has to be exactly one <p> inside <div class="abc">. So I need to check if <p> is present inside <div class="abc"> and then perhaps check if <p> tag has text or not.

Thanks, that is more clear. I'm going to have to think about this and get back to you (I think this check could be done in onEndTag_div(), but I will have to do some testing and make sure everything that is needed for this check is available, and if not then see if it can be added in an update). Right now my priority is to get v11 released. I will come back to this when things settle down a bit afterwards.

[Anjana P]

No Probs! Thanks!

-Anjana P

[Albert Wiersch]

Hello,

I've been working on this and came up with this:

Code: Select all

function onStartValidation() {
 #indivcount=0;
}

function onEndTagImpliedFromEndTag() {
 if matchNoCase(CurrentParentTagName,"p") { onEndTag_p(); }
}

function onEndTag_div() {
 if #indivcount {
  if matchNoCase($divclassarray[#indivcount],"abc") {
   if #ptagcount[#indivcount]!=1 { MessageEx(13,-1,MSG_ERROR,'This "div" element (with class="abc") does not contain exactly one "p" element; it contains '+toString(#ptagcount[#indivcount])+'.'); }
   else {
    if !#ptaghastext[#indivcount] { MessageEx(13,-1,MSG_ERROR,'This "div" element has exactly one "p" element but the "p" element contains no text.'); }
   }
  }
  #indivcount--;
 }
}

function onStartTag_div() {
 #indivcount++;
 #ptagcount[#indivcount]=0;

 if hasAtt("class") {
  #classindex=getAttIndex("class");
  $classvalue=getAttValue(#classindex);

  $divclassarray[#indivcount]=$classvalue;
 }
 else {
  $divclassarray[#indivcount]='';
 }
}

function onEndTag_p() {
 if #indivcount {
  if getValueInt(23) { #ptaghastext[#indivcount]=true; }
 }
}

function onStartTag_p() {
 if #indivcount {
  #ptaghastext[#indivcount]=false;
  #ptagcount[#indivcount]++;
 }
}


It should throw an error for "div" elements with class="abc" that do not contain exactly one "p" element (not counting any "p" elements that are buried in another "div"). If there is only one "p" element, then it will generate an error if it doesn't contain text. I did do some basic testing on this and it seems to work as expected.

I hope this is what you want.

Please note that you will need an update for this to work. It won't work in v11.0000. Please email or PM me if you'd like to try it and I will send you a link to a new build.

[Anjana P]

Hi Albert,

Undoubtedly, I would like to try it . My trial version for Pro v11 expired yesterday . Will I be able to install this new build and use it for a sufficient amount of time? Because I am still in the process of analyzing the tool.

Question on the function above: Will this kind of method work if I want to find one type of element in any another type of element, with and without classes applied to them?
Examples:
1. <p> inside <table>/<ul>/<li>
2. <p class="myClass"> inside <div>/<table class="myTable">/<ul>/<li>
3. <div> inside <ul>/<li>.
4. Nested level of <ul> & <li>

Thanks!
-Anjana P

[Anjana P]

Here is a more elaborate example: I want to check if this exact coding pattern is followed or not

Code: Select all

<div class="wizard">
   <ul class="twoStep">
      <li>
         <ul>
            <li class="step">Step 1</li>
            <li class="title selected">
               <a href="#">Title goes here</a>
            </li>
            <li class="description">
               Description text goes here
            </li>
         </ul>
      </li>
      <li class="arrow"></li>
      <li>
         <ul>
            <li class="step">Step 2</li>
            <li class="title">
               <a href="#">Title goes here</a>
            </li>
            <li class="description">
               Description text goes here
            </li>
         </ul>
      </li>
   </ul>
</div>

Thanks
Anjana P

[Albert Wiersch]

Undoubtedly, I would like to try it . My trial version for Pro v11 expired yesterday . Will I be able to install this new build and use it for a sufficient amount of time? Because I am still in the process of analyzing the tool.

Sure. I will email you a download link. It should work 'unregistered' for a while unless you've already used up 200 validations in trial mode, then it might require registration.

There is a BETA still available that doesn't expire until the end of Jan (but this won't work with the functions I provided as it is older than the release version):
http://www.htmlvalidator.com/freebeta/

Question on the function above: Will this kind of method work if I want to find one type of element in any another type of element, with and without classes applied to them?
Examples:
1. <p> inside <table>/<ul>/<li>
2. <p class="myClass"> inside <div>/<table class="myTable">/<ul>/<li>
3. <div> inside <ul>/<li>.
4. Nested level of <ul> & <li>

I don't see why that method could not be adapted to other similar tests. Some "easy" functions that may make some of these checks easier are the isChildOf(), isNChildTag() and isInRange() functions.

[Albert Wiersch]

Here is a more elaborate example: I want to check if this exact coding pattern is followed or not

You may be able to check some things easily, other things may be harder to check, and some things may not currently be possible... so I'm not sure exactly how to answer without actually trying to do it.

I can say that you should be able to check some of the pattern, but probably won't be able to check it 100%.

In the future, I hope to find ways to make such checking easier.