Why does this only work in IE?

JavaScript
1

I’m just learning JavaScript at the moment. I created a function to check regex of a form field but it only works in IE…


function regexChecker($value3,$value1,$value2) {
	
	var $requiredField = document.getElementById($value1);

	var $regexPattern = /^[0-9]{4}$/;
	
		if ( !$regexPattern.test($requiredField.value)) {
	
		// Create error message
		var $errorMessageOne = $value2;
		// Add error message variable document using createTextNode method
		var $firstError = document.createTextNode($errorMessageOne);
		// Create HTML element where error message will be placed in
		var $firstPara = document.createElement("p");
		
	
		// Set class attribute or warning
		//$firstPara.setAttribute("class","warning");
		$firstPara.className = "warning";
		// Append error message to HTML element
		$firstPara.appendChild($firstError);
		// create variable for the text field in question
		var $textField = document.getElementById($value3);
		// append error message to bottom of $textField
		$textField.appendChild($firstPara);
		// Changes background colour of field to yellow if not correct
		$requiredField.style.backgroundColor = "#ffffcc";
		// Changes border colour of field to red if not correct
		$requiredField.style.borderColor = "red";
		
		return false;
		
	}
	
}
2

You do not show your html, but it is likely that you are using getElementById for elements that do not have id attributes.

3

This is an example of how to best access form elements with scripting.

Give the form an identifier, so that the script can easily find the form.


<form id="login">
    <p>Username: <input type="text" name="username"></p>
    <p>Password: <input type="password" name="password"></p>
    <p><input type="submit"></p>
</form>

Notice that none of the elements within the form have an id. If you use the label tag to associate the label with the input field (as you should do) you would then use an id tag so that the label knows what input field to associate with.


<p><label for="username">Username:</label> <input id="username" name="username"></p>

With or without labels, the script should not assume the existence of an id on its elements.

The script is associated with the form by attaching the script to the forms submit event.


var form = document.getElementById('login');
form.onsubmit = validateForm;

This allows us to directly access the form element from the attached function via tht this keyword. We can then uses the form’s “elements” object to access the form elements. The elements object is accessed using the names on the form elements themself.

function validateForm() {
var form = this,
username = form.elements.username,
password = form.elements.password;

// carry on with the validation
...
}

After which you can then carry on working with the form elements.

4

Thanks for your responses

I changed this line

var $formField = document.getElementById("aForm");

To this

var $formField = document.getElementsByTagName("form")[0];

And now it works

5

As another point though.

What I’m doing is creating an error message under the form in a p tag with the class of warning.

However, every time I click on submit a new error message appears underneath the old one

What I really need to do is delete the old error message first upon submission of the form or it will be confusing for users.

I’ve been playing around with removeChild() but that doesn’t seem to work (at least not the way I’m trying to use it)

6

As it’s an error message, you could give it a class of “error” so that you can then style it appropriately.

Another benefit of using the class of “error” is that your script can use getElementsByClassName(‘error’) so that you can then remove them.

I couldn’t find a cohesive summary on how to properly use getElementsByClassName, so last month I put together some information on getting elements by class name

7

If getElementById() is a method of the document object then why doesn’t JavaScript have something comparable for classes? getElementsByClass()?

8

getElementById was introduced in DOM Level 2. Before then we used document.all and document.layers and other techniques instead. This meant that you would see older code checking if one or the exists, before using it.

These days, getElementById is in virtually all web browsers that are used today.

When it comes to getElementsByClassName, that’s something that has only been added to web browsers within the past couple of years as a part of supporting HTML5. Modern web browsers know how to do getElementsByClassName, but other web browsers (Internet Explorer included) don’t know how.

As a result, if you want to use getElementsByClassName you can check if it’s available, and if not you can then teach the web browser how to do it. That’s the basis on how compatibility code works, and is what allows you to use it even where it is not supported.

9

Are you intending to override the submit method here?

10

Good catch, that should be form.onsubmit instead, to override the default submit event.


form.onsubmit = validateForm;