Scanning HTML using javascript

@nbaconJan 24.2008

Is it possible to scan through HTML using a javascript function to find a specific class tag, then focus on the next occurrence of a textbox/checkboc/radiobutton/textarea after that class tag?

For example, I have the following code:

[code=html]<p>Field One : <span class=”required”><input type=”text” name=”myfield” size=”10″ maxlength=”20″ /></span></p>[/code]

Using a JavaScript function, I want to search through the HTML code for the class ‘required’. Once I find that tag, I want to move forward to text field in order to validate that it is not blank. Is it possible to do this? If so, a nudge in the right direction would be appreciated. Thanks!

to post a comment

JavaScript

10 Comments(s) _↴

@vwphillipsJan 24.2008 — #

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
 <head>
 <title></title>
 <script language="JavaScript" type="text/javascript">
 /*<![CDATA[*/
 
 function Check(frm){
 var els=frm.elements;
 var mess=['Check'];
 for (var zxc0=0;zxc0<els.length;zxc0++){
 if (els[zxc0].parentNode.className&&els[zxc0].parentNode.className=='required'&&els[zxc0].value.length<1){
 mess.push(els[zxc0].name);
 }
 }
 if (mess.length>1){
 alert(mess.join('n'));
 return false;
 }
 return true;
 
 }
 /*]]>*/
 </script></head>
 
 <body>
 <form>
 <p>Field One : <span class="required"><input type="text" name="myfield" size="10" maxlength="20" /></span></p>
 <p>Field 2 : <span class="required"><input type="text" name="myfield2" size="10" maxlength="20" /></span></p>
 <input type="button" name="" value="Test" onclick="Check(this.form);" />
 </form>
 </body>
 
 </html>[/CODE]

@cgishackJan 24.2008 — #This might not be the best way to do things...

But here is some code you can use to get the job done.

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 
 &lt;title&gt;Untitled Document&lt;/title&gt;
 &lt;/head&gt;
 
 &lt;style&gt;
 .required
 {
 
 }
 
 .invalid 
 {
 background-color:#FF3300;
 }
 &lt;/style&gt;
 
 &lt;script&gt;
 function validate()
 {
 var spans = document.getElementsByTagName('span');
 
 <i>	</i>for (var i in spans)
 <i>	</i>{
 <i>	</i>	if (spans[i].className == 'required')
 <i>	</i>	{
 <i>	</i>		var formField = spans[i].childNodes[0];
 <i>	</i>		if (formField.value == "")
 <i>	</i>		{
 <i>	</i>			formField.style.backgroundColor = "#FF88FF";
 <i>	</i>		}
 <i>	</i>		else
 <i>	</i>		{
 <i>	</i>			formField.style.backgroundColor = "";
 <i>	</i>		}
 <i>	</i>	}
 <i>	</i>}
 }
 
 &lt;/script&gt;
 
 &lt;body&gt;
 
 One : &lt;span class="required"&gt;&lt;input type="text" name="myfield1" size="10" maxlength="20" /&gt;&lt;/span&gt;&lt;/p&gt;
 Two : &lt;span class="required"&gt;&lt;input type="text" name="myfield2" size="10" maxlength="20" /&gt;&lt;/span&gt;&lt;/p&gt;
 Three : &lt;span class="required"&gt;&lt;input type="text" name="myfield3" size="10" maxlength="20" /&gt;&lt;/span&gt;&lt;/p&gt;
 Four : &lt;span class="required"&gt;&lt;input type="text" name="myfield4" size="10" maxlength="20" /&gt;&lt;/span&gt;&lt;/p&gt;
 Five : &lt;span class="required"&gt;&lt;input type="text" name="myfield5" size="10" maxlength="20" /&gt;&lt;/span&gt;&lt;/p&gt;
 
 &lt;input type="button" value="CLick to validate" onclick="validate()"/&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Drew

@magentaplacentaJan 24.2008 — #This loops through all [b]input[/b] tags and looks for those with [b]class="required"[/b] (note I removed your span and put the class right on the inputs - why put the required class on the span?

This gets a count of the required inputs - you don't really need this, it's just illustrative. Also note the required css class gives required fields a separate background. If you were to add more required fields, your count would go up. Again, this is just illustrative of looping through elements and only getting the ones we want.

I also included some very simple regular expression validation - field one takes numbers, field two takes letters.

[CODE]<script type="text/javascript">
 function checkRequired() {
 var inputtags = document.getElementsByTagName("input");
 var count = 0;
 
  for (var i=0; i < inputtags.length; i++) {
   var input = inputtags[i];
   if (input.className == "required") {
   count++;
   }
  }
 
  alert("There are " + count + " required fields herennNow let's validate them");
  validateRequired();
 }
 
 function validateRequired() {
 var myfield1 = document.getElementById("myfield1").value;
 var pattern1 = /d+/,g;
 var result1 = myfield1.search(pattern1);
 if (result1 != -1) alert("Field One: good numbers");
 else alert("Field One: numbers only, please");
 
  var myfield2 = document.getElementById("myfield2").value;
  var pattern2 = /[a-zA-z]/,g;
  var result2 = myfield2.search(pattern2);
  if (result2 != -1) alert("Field Two: good letters");
  else alert("Field Two: letters only, please");
 }
 </script>
 
 <style type="text/css">
 .required {
 background:#fdeaea;
 }
 </style>
 
 
 <p>Field One : <input class="required" type="text" id="myfield1" size="10" maxlength="20" /> (numbers only)</p>
 
 <p>Field Two : <input class="required" type="text" id="myfield2" size="10" maxlength="20" /> (letters only)</p>
 
 <p>Field Three : <input type="text" id="myfield3" size="10" maxlength="20" /></p>
 
 <input type="button" onclick="checkRequired();" value="How many elements with class='required'?">[/CODE]

@codingisfunJan 25.2008 — #I never understood regular expression.

@KorJan 25.2008 — #I never understood regular expression.[/QUOTE]
Try starting from here:

http://lawrence.ecorp.net/inet/samples/regexp-intro.php

@nbaconauthorJan 25.2008 — #As further explanation, the HTML form elements are being generated via FCKeditor rich text editor. This editor has a lot of capability as far as formatting the text that is entered, but all of the HTML formatting is done via <span> tags. I guess it is easier to do it that way than to programmatically add formatting into the <input> tags, etc. So I am basically stuck reading 'class' attributes from the span tags that are added to the pre-existing form elements for formatting.

Thanks for all of the feedback - I will give this stuff a try.

@codingisfunJan 26.2008 — #I would like to validate a field for cost 3 decimal places (x.xxx)

Example: 1.000 can be entered 1, 0.111 can be entered as .111 and s on

I have this regular expression is "/d*.d{3}/" .

This does not work for 1, I have to put 1.000. Any suggestion? Thanks.

@ZeroKilledJan 26.2008 — #
I have this regular expression is "/d*.d{3}/"
[/QUOTE]

try this one

<i>
 </i>/d(.d{3})?/
 or 
 /d(.d{1,3})?/

the first one match integer without decimal notation or floating number fixed to three digit, that is, [B]1[/B] or [B]1.000[/B]. but don't match [B]1.00[/B] or [B]1.0[/B]. the last pattern match what the first can't.

@codingisfunJan 26.2008 — #Both patterns don't work. I tried with .1, .11, .111 should be invalid.

@ZeroKilledJan 26.2008 — #sorry, you're right. i guess i misunderstood the idea. now this should work d*(.d{1,3})?

Also in #JavaScript _↴

Objects Simple Slide Show- please help The "Vote Before You Enter" Script

Success!

Help @nbacon spread the word by sharing this article on Twitter...

Tweet This

Scanning HTML using javascript

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Scanning HTML using javascript

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴