Display error if field is empty..

Tjobbe · #1 (**permalink**) 09-27-06, 09:32 AM

Hey everyone.

I'm just leanring javascript at the moment but I'm trying to rack my brains on getting javascript to insert some html if a field is empty.

At the moment, my script checks the field onsubmit and displays an alert box if there is an error.

I'd like it to instead, insert a paragraph of text that only displays if that field is empty, and no longer have the hideous alert boxes!

Can anyone advise me on how to do it?

heres what I'm using now, thanks guys!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<SCRIPT type="text/javascript">

//creates a function to check the email field
function validateForm(){

	//a "shorcut" variable to save me typing the form to check each time
	var form_check = document.forms.test.elements;

	//checks if the first name field has been left blank..
	if(form_check.first_name.value == ''){

		//and if it has, tells them off
		alert("Please enter your first name");
		return false;
	}

	//checks if the last name field has been left blank..
	if(form_check.last_name.value == ''){

		//and if it has, tells them off
		alert("Please enter your last name");
		return false;
	}

	//if the email field does not have one @ sign..
	if(form_check.email.value.indexOf('@')<0){

		//then show this message
		alert('Your email address must be in the correct format.\n\nPlease enter an \"@\" sign.');
		return false;
	}

	//if all is well submit the form. Happy days - "Lets validate, and have a good time"
	return true;
}

</SCRIPT>

</HEAD>

<BODY>
<FIELDSET style="padding:10px; width:250px; margin:0px auto;">

	<LEGEND>Short form</LEGEND>
	<p>Please fill in the following form, fields marked with a star (*) must be filled in.</p>

	<FORM onsubmit="return validateForm();" name="test" method="post" action="result.php">

		<p><LABEL for="first_name">First name*: </LABEL><INPUT type="text" name="first_name" id="first_name"></p>

		<p><LABEL for="last_name">Last Name*: </LABEL><INPUT type="text" name="last_name" id="last_name"></p>

		<p><LABEL for="email">eMail Address*: </LABEL><INPUT type="text" name="email" id="email"></p>

		<p><LABEL for="phone">Phone number: </LABEL><INPUT type="text" name="phone" id="phone"></p>

		<p><INPUT type="submit" value="submit"></p>

	</FORM>

</FIELDSET>
</BODY>
</HTML>

GO4TF4CE · #2 (**permalink**) 09-27-06, 10:06 AM

put a div tag near your input box and then replace your alert code with this

document.getElementById('error1').innerHTML='Your Error Message in html';

Tjobbe · #3 (**permalink**) 09-27-06, 10:18 AM

Thanks GoatFace, much appreciated!

Tjobbe · #4 (**permalink**) 09-27-06, 10:23 AM

Actually, I can't get it to work with that alone, I have created an emtpy div directly under the firsnt_name field in the html. replaced my

Code:

alert("Please enter your first name");

with your:

Code:

document.getElementById('error1').innerHTML='Your Error Message in html';

I've named the div with an id, in this case "error1", is that correct? How does it know to post the html??

GO4TF4CE · #5 (**permalink**) 09-27-06, 10:39 AM

sorry I probably didnt explain too well.

heres a quick example, sorry its a bit messy I am little bit busy at the moment.

Code:

<HTML>
<HEAD>
<SCRIPT>
function checkerrors() { 

if (document.getElementById('myinputbox').value=='') { 
document.getElementById('error1').innerHTML='';
}

}
</SCRIPT>
</HEAD>
<BODY>
My Input <input type="text" name="myinputbox" id="myinputbox">
<div id="error1"></div>
<input type="button" value="Submit" onclick="checkerrors">
</BODY>
</HTML>

Tjobbe · #6 (**permalink**) 09-27-06, 11:39 AM

I know your busy - but it isn't working!

I've searched for working innerHHTML and onclick scripts that work but I cant get it to work with this if statement.

Shaffer · #7 (**permalink**) 09-27-06, 12:08 PM

I would do it this way...
I didn't have much time to make it or look over it so please forgive me if I make mistakes by correcting them.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<SCRIPT type="text/javascript">

//creates a function to check the email field
function validateForm(){

// Create a dumby Boolean
    problem == FALSE;
// Create a dumby Variable
    problems = "";

// A "shorcut" variable to save me typing the form to check each time
    var form_check = document.forms.test.elements;
             
if(form_check.submit_form) { //makes sure the form exists.

	// Checks if the first name is valid.
	if(form_check.first_name.value == '' || form_check.first_name.value != /[a-z]{3,10}/){
                 problem == TRUE;
                 problems += "\nPlease enter a valid first name!"
	}

	// Checks if the last name is valid.
	if(form_check.last_name.value == '' || form_check.first_name.value != /[a-z]{3,10}/){
                 problem == TRUE;
                 problems += "\nPlease enter a valid last name!"
	}

	// Checks if the E-mail address is valid.
	if(form_check.email.value == '' ||form_check.email.value != /[0-9a-zA-Z]{4,26}@[0-9a-zA-Z]{1, }.[a-zA-Z]{2,6}
                 
	}
}
}

</SCRIPT>

</HEAD>

<BODY>
<FIELDSET style="padding:10px; width:250px; margin:0px auto;">

	<LEGEND>Short form</LEGEND>
	<p>Please fill in the following form, fields marked with a star (*) must be filled in.</p>

	<FORM name="test" method="post" action="result.php">

		<p><LABEL for="first_name">First name*: </LABEL><INPUT type="text" name="first_name" id="first_name"></p>

		<p><LABEL for="last_name">Last Name*: </LABEL><INPUT type="text" name="last_name" id="last_name"></p>

		<p><LABEL for="email">eMail Address*: </LABEL><INPUT type="text" name="email" id="email"></p>

		<p><LABEL for="phone">Phone number: </LABEL><INPUT type="text" name="phone" id="phone"></p>

		<p><INPUT type="button" value="submit" name="submit_form" onclick="validateForm()"></p>

	</FORM>

</FIELDSET>
</BODY>
</HTML>

Shaffer