[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 474
  • Last Modified:

Make sure a text box is not blank, and alert user if it is with javascript

I need to make a form where a user enters data, and if they do not enter data into a text box, they will be alerted when they try to submit it.  this is what I have so far, I have no work done on the actual submit part of the form, just error checking
<html>
 
<head>
 
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset();
}
</script>
 
	<SCRIPT language=Javascript>
     
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
 
         return true;
      }
      
	</SCRIPT>
 
<script type="text/javascript">
function validate()
{
 
var fname=document.getElementById("firstname").value;
var lname=document.getElementById("lastname").value;
var age=document.getElementById("age").value;
var phone=document.getElementById("phone").value;
var address=document.getElementById("address").value;
var city=document.getElementById("city").value;
var postal=document.getElementById("postal").value;
var at=document.getElementById("email").value.indexOf("@");
submitOK="true"
 
if (fname==0)
   {
   alert("You must enter a value for name");
   submitOk="false";
   }
if (lname==0)
   {
   alert("you must enter a value for last name");
   submitOk="false";
   }
if (phone==0)
   {
   alert("you must enter a phone number, with only numbers");
   submitOk="false";
   }
if (address==0)
   {
   alert("you must enter an address");
   submitOk="false";
   }
if (city==0)
   {
   alert("you must enter a city");
   submitOk="false";
   }
if (postal==0)
   {
   alert("you must enter a postal code");
   submitOk="false";
   }
if (isNaN(age) ||age<1||age>100)
   {
   alert("The age must be a number between 1 and 100");
   submitOK="false";
   }
if (at==-1)
   {
   alert("not a valid email!");
   submitOk="false";
   }
if (submitOK=="false")
   {
   return false;
   }
}
</script>
 
</head>
 
<body>
 
 
<form id="myForm"">
 
<table align="center" border="0" cellpadding="2" cellspacing="8">
 
<tr>
<td align="center">First Name* (max 10 characters):
</td>
<td><input maxlength="10" type="text" id="firstname" />
</td>
</tr>
 
<tr>
<td align="center">Last Name* (max 10 characters):
</td>
<td><input maxlength="10" type="text" name="lastname" id="lastname" />
</td>
</tr>
 
<tr><td align="center">Age* (from 1 to 100):
</td>
<td><input maxlength="3" type="text" name="age" id="age" onkeypress="return isNumberKey(event)" />
</td>
</tr>
 
<tr>
<td align="center">Gender:
</td>
<td>
 
<input type="radio" name="sex" value="male"/>Male
<br>
<input type="radio"
name="sex" value="female"/>Female
 
</td>
</tr>
 
 
<tr><td align="center"><label for="selected">You selected:</label></td><td><input maxlength="10" type="text" name="selectgender" id="selectgender" /></td></tr>
 
<tr><td align="center"><label for="interests">Your Interests:</label></td>
<td>
 
 
 
 
 
 
 
 
 
 
<input type="checkbox" name="vehicle" value="reading" />Reading
<br />
 
<input type="checkbox" name="vehicle" value="sports" />Sports
<br />
 
<input type="checkbox" name="vehicle" value="business" />Business
<br />
 
<input type="checkbox" name="vehicle" value="music" />Music
<br />
 
<input type="checkbox" name="vehicle" value="surfing" />Surfing Web
<br />
 
<input type="checkbox" name="vehicle" value="studies" />Higher Studies
 </td>
 
</tr>
 
<tr>
<td>
E-Mail*:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
 
 
<tr>
<td>
Phone*:
</td>
 
<td>
<input type="text" name="phone" id="phone" onkeypress="return isNumberKey(event)" />
</td>
</tr>
 
 
<tr>
<td>
Address*:
</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
 
<tr>
<td>
State*:
</td>
<td>
<input type="text" name="state" id="state" />
</tr>
 
<tr>
<td>
Postal Code*:
</td>
<td>
<input type="text" name="postal" id="postal" onkeypress="return isNumberKey(event)" />
</td>
</tr>
 
 
 
 
<tr>
<td>Select State</td>
 
<td>
<select name="state" size="1">
	<option value="AK">AK</option>
	<option value="AL">AL</option>
	<option value="AR">AR</option>
	<option value="AZ">AZ</option>
	<option value="CA">CA</option>
	<option value="CO">CO</option>
	<option value="CT">CT</option>
	<option value="DC">DC</option>
	<option value="DE">DE</option>
	<option value="FL">FL</option>
	<option value="GA">GA</option>
	<option value="HI">HI</option>
	<option value="IA">IA</option>
	<option value="ID">ID</option>
	<option value="IL">IL</option>
	<option value="IN">IN</option>
	<option value="KS">KS</option>
	<option value="KY">KY</option>
	<option value="LA">LA</option>
	<option value="MA">MA</option>
	<option value="MD">MD</option>
	<option value="ME">ME</option>
	<option value="MI">MI</option>
	<option value="MN">MN</option>
	<option value="MO">MO</option>
	<option value="MS">MS</option>
	<option value="MT">MT</option>
	<option value="NC">NC</option>
	<option value="ND">ND</option>
	<option value="NE">NE</option>
	<option value="NH">NH</option>
	<option value="NJ">NJ</option>
	<option value="NM">NM</option>
	<option value="NV">NV</option>
	<option value="NY">NY</option>
	<option value="OH">OH</option>
	<option value="OK">OK</option>
	<option value="OR">OR</option>
	<option value="PA">PA</option>
	<option value="RI">RI</option>
	<option value="SC">SC</option>
	<option value="SD">SD</option>
	<option value="TN">TN</option>
	<option value="TX">TX</option>
	<option value="UT">UT</option>
	<option value="VA">VA</option>
	<option value="VT">VT</option>
	<option value="WA">WA</option>
	<option value="WI">WI</option>
	<option value="WV">WV</option>
	<option value="WY">WY</option>
</select>
 
</td></tr>
 
 
<tr>
<td align="center" colspan="2">
<input type="button" value="Submit" onclick="return validate()" />&nbsp;<input type="reset" onclick="formReset()" value="Reset"/>
</td>
</tr>
 
 
 
</table>
 
</form>
 
</body>
 
</html>

Open in new window

0
shad0wsay3r
Asked:
shad0wsay3r
4 Solutions
 
dan_nealCommented:
any input type=text, textarea, and select-one type controls will have a .value property that you can use to determine if the control has any value such as
if (document.getElementById("firstname").value == '') {error message would display and trigger set to prevent form from submitting}
For select-one type controls, you would check the value = to whatever default value you have set if there is one.
0
 
0791882310Commented:
this code i pulled from a purl i just created earlier today.. in the fieldRequired array, replace the values with the field names you want to manage input...

put this in your form tag....  onsubmit="return formCheck(this);"
  <script language="JavaScript">
<!--
 
 
function formCheck(formobj){
	
	var fieldRequired = Array("email", "month", "insuranceCarrier");
	
	var fieldDescription = Array("You must provide your email address.", "You must select a month", "You must select your insurance carrier");
	
	var alertMsg = "Please complete the following fields:\n";
	
	var l_Msg = alertMsg.length;
	
	for (var i = 0; i < fieldRequired.length; i++){
		var obj = formobj.elements[fieldRequired[i]];
		if (obj){
			switch(obj.type){
			case "select-one":
				if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "select-multiple":
				if (obj.selectedIndex == -1){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			case "text":
			case "textarea":
				if (obj.value == "" || obj.value == null){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
				break;
			default:
			}
			if (obj.type == undefined){
				var blnchecked = false;
				for (var j = 0; j < obj.length; j++){
					if (obj[j].checked){
						blnchecked = true;
					}
				}
				if (!blnchecked){
					alertMsg += " - " + fieldDescription[i] + "\n";
				}
			}
		}
	}
 
	if (alertMsg.length == l_Msg){
		return true;
	}else{
		alert(alertMsg);
		return false;
	}
}
// -->
</script>

Open in new window

0
 
informaniacCommented:
What dan_neal means is

var fname=document.getElementById("firstname").value;

if(fname=='')
{
    alert("You must enter a value for name");
   submitOk="false";  
}

Since fname is a textbox. you will not be checking whether is 0 instead you'll check if it's empty.

0 check will be done when u r using dropdownlist or listbox control.

Hope this helps.
0
 
abbasi1Commented:
shad0wsay3r,
i just changed your own code and its working now
let me know if there is some problem

best regards,
Nazish
<html>
 
<head>
 
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset();
}
</script>
 
	<SCRIPT language=Javascript>
     
      function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
 
         return true;
      }
      
	</SCRIPT>
 
<script type="text/javascript">
function validate()
{
    submitOK = "true"
 
var fname=document.getElementById('firstname').value;

var lname=document.getElementById('lastname').value;
var age = document.getElementById('age').value;
var phone=document.getElementById('phone').value;
var address=document.getElementById('address').value;
var city=document.getElementById('city').value;


var postal=document.getElementById('postal').value;
var at=document.getElementById('email').value.indexOf("@");
/*

*/
//

if (fname.length==0)
   {
   alert("You must enter a value for name");
   return;
   
   
   }
if (lname=='')
   {
       alert("you must enter a value for last name");
       return;
   
   }
   if (age.length == 0) {
       alert("You must enter a value for age");
       return;




   } else if (age < 1 || age > 100) {
           alert("The age must be a number between 1 and 100");
           return;

       }
if (at == -1) {
           alert("not a valid email!");
           return;

       }

if (phone.length==0)
   {
       alert("you must enter a phone number, with only numbers");
       return;
   
   }
if (address.length==0)
   {
       alert("you must enter an address");
       return;
   
   }
if (city.length==0)
   {
       alert("you must enter a city");
       return;
   
   }
if (postal.length==0)
   {
       alert("you must enter a postal code");
       return;
   
   }
   alert("congrats")
}
</script>
 
</head>
 
<body>
 
 
<form id="myForm">
 
<table align="center" border="0" cellpadding="2" cellspacing="8">
 
<tr>
<td align="center">First Name* (max 10 characters):
</td>
<td><input maxlength="10" type="text" id="firstname" />
</td>
</tr>
 
<tr>
<td align="center">Last Name* (max 10 characters):
</td>
<td><input maxlength="10" type="text" name="lastname" id="lastname" />
</td>
</tr>
 
<tr><td align="center">Age* (from 1 to 100):
</td>
<td><input maxlength="3" type="text" name="age" id="age" onkeypress="return isNumberKey(event)" />
</td>
</tr>
 
<tr>
<td align="center">Gender:
</td>
<td>
 
<input type="radio" name="sex" value="male"/>Male
<br>
<input type="radio"
name="sex" value="female"/>Female
 
</td>
</tr>
 
 
<tr><td align="center"><label for="selected">You selected:</label></td><td><input maxlength="10" type="text" name="selectgender" id="selectgender" /></td></tr>
 
<tr><td align="center"><label for="interests">Your Interests:</label></td>
<td>
 
 
 
 
 
 
 
 
 
 
<input type="checkbox" name="vehicle" value="reading" />Reading
<br />
 
<input type="checkbox" name="vehicle" value="sports" />Sports
<br />
 
<input type="checkbox" name="vehicle" value="business" />Business
<br />
 
<input type="checkbox" name="vehicle" value="music" />Music
<br />
 
<input type="checkbox" name="vehicle" value="surfing" />Surfing Web
<br />
 
<input type="checkbox" name="vehicle" value="studies" />Higher Studies
 </td>
 
</tr>
 
<tr>
<td>
E-Mail*:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
 
 
<tr>
<td>
Phone*:
</td>
 
<td>
<input type="text" name="phone" id="phone" onkeypress="return isNumberKey(event)" />
</td>
</tr>
 
 
<tr>
<td>
Address*:
</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
 
<tr>
<td>
City*:
</td>
<td>
<input type="text" name="address" id="city" />
</td>
</tr>
 

 
<tr>
<td>
Postal Code*:
</td>
<td>
<input type="text" name="postal" id="postal" onkeypress="return isNumberKey(event)" />
</td>
</tr>
 
 
 
 
<tr>
<td>Select State</td>
 
<td>
<select name="state" size="1">
	<option value="AK">AK</option>
	<option value="AL">AL</option>
	<option value="AR">AR</option>
	<option value="AZ">AZ</option>
	<option value="CA">CA</option>
	<option value="CO">CO</option>
	<option value="CT">CT</option>
	<option value="DC">DC</option>
	<option value="DE">DE</option>
	<option value="FL">FL</option>
	<option value="GA">GA</option>
	<option value="HI">HI</option>
	<option value="IA">IA</option>
	<option value="ID">ID</option>
	<option value="IL">IL</option>
	<option value="IN">IN</option>
	<option value="KS">KS</option>
	<option value="KY">KY</option>
	<option value="LA">LA</option>
	<option value="MA">MA</option>
	<option value="MD">MD</option>
	<option value="ME">ME</option>
	<option value="MI">MI</option>
	<option value="MN">MN</option>
	<option value="MO">MO</option>
	<option value="MS">MS</option>
	<option value="MT">MT</option>
	<option value="NC">NC</option>
	<option value="ND">ND</option>
	<option value="NE">NE</option>
	<option value="NH">NH</option>
	<option value="NJ">NJ</option>
	<option value="NM">NM</option>
	<option value="NV">NV</option>
	<option value="NY">NY</option>
	<option value="OH">OH</option>
	<option value="OK">OK</option>
	<option value="OR">OR</option>
	<option value="PA">PA</option>
	<option value="RI">RI</option>
	<option value="SC">SC</option>
	<option value="SD">SD</option>
	<option value="TN">TN</option>
	<option value="TX">TX</option>
	<option value="UT">UT</option>
	<option value="VA">VA</option>
	<option value="VT">VT</option>
	<option value="WA">WA</option>
	<option value="WI">WI</option>
	<option value="WV">WV</option>
	<option value="WY">WY</option>
</select>
 
</td></tr>
 
 
<tr>
<td align="center" colspan="2">
<input type="button" value="Submit" onclick="return validate()" />&nbsp;<input type="reset" onclick="formReset()" value="Reset"/>
</td>
</tr>
 
 
 
</table>
 
</form>
 
</body>
 
</html>

Open in new window

0
 
CWS (haripriya)Commented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now