i have this function and it works right only to mozilla

function check_field(formid,field)
{
	var k=document.getElementById(formid);
	if (k[field].value=="")
	{
		
		document.getElementById("wrong_"+field).innerHTML="    Κενό πεδίο";
	}
	else
		document.getElementById("wrong_"+field).innerHTML="";
}

i use this element to call it

<tr >
                <th width="22%" <?php if (isset($_SESSION["prob_onoma"])) echo "class=\"become_wrong\"";?> align="left" >
                    Ονοματεπώνυμο&nbsp;:*
                </th>
                <th width="45%">
                    <input type="text" onblur="check_field('contact_form','onoma')" name="onoma" id="onoma" maxlength="40" size="40" value='<?php if (isset($_SESSION["onoma"])) echo $_SESSION["onoma"];?>' />
                </th>
                <th width="33%" class="wrong" id="wrong_onoma" name="wrong_onoma" >
                    <!-- edo emfanizei to lathos -->
                    <?php if (isset($_SESSION["prob_onoma"])) echo $_SESSION["prob_onoma"];?>
                </th>
             </tr>

but this function works right only in mozilla how it can run correctly to internet exmplorer/safari/chrome/opera? And why it does not work correctly to the other browsers?
Thank you very much

Dani AI

Generated

Two quick, practical points explain why the same handler can "work in Mozilla" but not in other browsers: broken HTML that changes how the DOM is built, and brittle ways of finding/attaching to elements that different engines treat differently. The posted table markup contains a stray character in the first <th>, which will make some browsers repair the DOM differently and can move or drop the form or its fields. Run the page through the W3C validator to catch malformed tags and stray characters: W3C Markup Validation Service.

A short, ordered checklist to debug and fix the problem:

  • Inspect the live DOM in each browser (DevTools). Confirm the form element and the input cell actually exist where you expect them. Use the console to query the element by selector (for example, by form id and input name) so you can tell whether the script is operating on the right node.
  • Fix any validation errors first. Small syntax issues in table or attribute markup are the most common cause of cross-browser differences.
  • Use feature-safe event attachment and a submit-time validator as a fallback. Different engines handle inline attributes and early script execution differently; attaching handlers after the DOM is ready and providing a final on-submit check prevents missed validation.
  • If you display messages with page text that contains Greek, make sure the page encoding is declared and delivered consistently (meta charset and HTTP header). Incorrect encoding can make strings appear missing or garbled in some browsers; see the meta charset guidance: meta charset - MDN.

As recommended, add simple runtime checks in each target browser to confirm whether the handler runs and whether the error cell can be found. Fix the markup first, then re-test—most cross-browser "works only in Firefox" cases disappear after that. Finally, always keep a server-side validation fallback so users cannot bypass checks by client differences.

Recommended Answers

All 4 Replies

xxmp,

I can't see anything obviously wrong but can suggest a way ahead.

First, reduce some uncertainty and reduce the need for document.getElementById() in check_field() by reformulating the onblur code as follows :

<input type="text" onblur="check_field(this,'wrong_onoma')" name="onoma" id="onoma" maxlength="40" size="40" value="<?php if (isset($_SESSION["onoma"])) echo $_SESSION["onoma"];?>" />

Then, rewrite check_field() to receive those parameters and include some alerts to see where things are breaking down in IE/Opera etc. eg:

function check_field(inputElement, errorElementId)
{
  alert("check_field");//to see whether the onblur event triggers its handler.
  var errorMessage;
  var errorElement = document.getElementById(errorElementId);
  if (!inputElement){ alert("Input element element not found"); }
  if (!errorElement){ alert("Error element not found"); }
  if (inputElement && inputElement.value === "")
  {
    errorMessage = "&nbsp;&nbsp;&nbsp;&nbsp;?e?? ped??";
	if (errorElement) { errorElement.innerHTML = errorMessage; }
	else { alert(errorMessage); }
  }
  else {
	if (errorElement) { errorElement.innerHTML = ""; }
	else { alert(""); }
  }
}

By seeing which alert(s) fire you should be able to see where the code is failing.

(Sorry, you will need to replace the Greek characters, they don't survive copy/paste under "English" windows).

Airshow

Another thought :

Try my code with and without Greek characters to see if they are the problem.

If necessary, you can write your error message directly into your error field ("wrong_onoma") and hide it with css display:none . Then just show/hide the error message with something like :

errorElement.style.display = 'block';
//and
errorElement.style.display = 'none';

This will avoid having to handle Greek characters in Javascript. As long as you have the right <META http-equiv="Content-Type" content="text/html; charset=........."> in the page head, then you should be OK. I'm sure you understand this better than I where the Greek characterset is concerned.

Airshow

it seems that onblur it works only on mozilla do you know why it does not work to the others?
Thank you very much for your help

it seems that onblur it works only on mozilla do you know why it does not work to the others?
Thank you very much for your help

Mmmmm. Maybe you can ignore all that stuff about Greek characters.

Browsers are strange animals. IE6 certainly knows about <input onblur="..."> (I just checked it) but maybe MS forgot to implement it in later versions (IE7/8). My reference book says that input onblur was supported by Netscape from version 2 on but that doesn't mean to say all the Moz browsers still play ball.

Personally, I choose not to validate fields onblur because of this very issue. It's just too unreliable. By all means try it but always have an additional, general checker which fires <form onsubmit="..."> to check everything.

If you must have checking as you tab through a form, then you can fire your general checker onfocus for each field, which tends to be more reliable than onblur. You have to check everything every time because you don't know which field was just modified.

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.