JavaScript Data Validation


There are two main strategies for improving user input: specialized input elements and pattern-matching. Together, these tools can help you ensure that the data the user enters is useful and valid. Specialized input elements include things like drop-down lists and list boxes. In this way you supply a list of valid choices. The other way is to pattern matching. The user enters some text from the keyboard and you use regular expressions to validate the entered text. Below is an example of the HTML select.

Please select a color and click the Change Color button



The select object’s default behavior is to provide a drop-down list. The first element on the list is displayed, but when the user clicks the list, the other options appear. The drop-down list has an HTML id. The button has an onclick event. Below is the HTML code.

<form action = "">
	<h4>Please select a color and click the Change Color button</h4>
	<fieldset>
		<select id = "selColorJavaScriptDataValidation">
			<option value = "#FFFFFF">White</option>
			<option value = "#FF0000">Red</option>
			<option value = "#FFCC00">Orange</option>
			<option value = "#FFFF00">Yellow</option>
			<option value = "#00FF00">Green</option>
			<option value = "#0000FF">Blue</option>
			<option value = "#663366">Indigo</option>
			<option value = "#FF00FF">Violet</option>
		</select>
		<input type = "button"
		value = "change color"
		onclick = "changeColorJavaScriptDataValidation()" />
	</fieldset>
</form>

Now we need to write a JavaScript function that changes the background color when the user clicks the button. After writing the code, we need to use WordPress Enqueue to register and load the JavaScript coder that we wrote. There is an article in this website that briefly discusses Enqueue. If you are not using WordPress you can ignore that article.

Below is our JavaScript function that changes the background color.

function changeColorJavaScriptDataValidation(){
	var selColor = document.getElementById("selColorJavaScriptDataValidation");
	var color = selColor.value;
	document.body.style.backgroundColor = color;
} // end function

We have already discussed getElementById. One thing to note about value. The value property of the select object will reflect the value property of the currently selected option. So, if the user has chosen “yellow”, the value of selColor will be “#FFFF00”, not “yellow”.

Adding our JavaScript in WordPress

In WordPress, we can use Enqueue to add our function to the footer. Our file containing our JavaScript code is named changeColourJSDataValidation.js. Add the following php code to the functions.php file in your WordPress child theme.

function porterwebsites_add_change_color_script() {
	wp_register_script('my_change_color_script', get_stylesheet_directory_uri() . '/changeColourJSDataValidation.js', false,'1.0', true);
	wp_enqueue_script('my_change_color_script');
}
add_action( 'wp_enqueue_scripts', 'porterwebsites_add_change_color_script' );  

This blog post was modified from a discussion in the book: JavaScript and AJAX for Dummies, Chapter 7: Getting Valid Input. The next post is about creating a multiple-selection list box.

Leave a comment

Your email address will not be published. Required fields are marked *