Have last text field \'age\' accept numbers only. Form works except the Age fiel
ID: 662416 • Letter: H
Question
Have last text field 'age' accept numbers only. Form works except the Age field needs to take numeric only. use jQuery to validate
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQ</title>
<style>
.hidden { display:none; }
.error { color:red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#NameForm").submit(validateForm);
});
//validate form controls
function validateForm(){
$(".error").hide();
var validFirstName =validateTextField("#FirstName","#errorFirstName");
var validLastName =validateTextField("#LastName","#errorLastName");
var validAge =validateTextField("#Age","#errorAge");
//evaluates true or false
return validFirstName && validLastName && validAge;
}
function validateTextField(fieldID,errorID)
{
//did user input anything
if($(fieldID).val()=="")
{
//show error message
$(errorID).show();
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Enter First Name, Last Name, and Age</h1>
<form id="NameForm" action="Success.html">
<p>
<label>First Name:
<input type="text" id="FirstName" name="FirstName">
</label>
<span id="errorFirstName" class="hidden error">*Field cannot be blank
</span>
</p>
<p>
<label>Last Name:
<input type="text" id="LastName" name="LastName">
</label>
<span id="errorLastName" class="hidden error">*Field cannot be blank
</span>
</p>
<p>
<label>Age:
<input class="numeric" type="text" id="Age" name="Age">
</label>
<span id="errorAge" class="hidden error">*Field cannot be blank
</span>
</p>
<button type="submit" name="submit">continue
</button>
</form>
</body>
</html>
Explanation / Answer
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQ</title>
<style>
.hidden { display:none; }
.error { color:red; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#NameForm").submit(validateForm);
});
//validate form controls
function validateForm(){
$(".error").hide();
var validFirstName =validateTextField("#FirstName","#errorFirstName");
var validLastName =validateTextField("#LastName","#errorLastName");
var validAge =validateAgeIsNumeric("#Age","#AgeNotNumeric");
//evaluates true or false
return validFirstName && validLastName && validAge;
}
function validateAgeIsNumeric(fileID,errorID)
{
if(validateTextField(fileID,"#errorAge"))
{
if($.isNumeric($(fileID).val()))
{
return true;
}
$(errorID).show();
return false;
}
return false;
}
function validateTextField(fieldID,errorID)
{
//did user input anything
if($(fieldID).val()=="")
{
//show error message
$(errorID).show();
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Enter First Name, Last Name, and Age</h1>
<form id="NameForm" action="Success.html">
<p>
<label>First Name:
<input type="text" id="FirstName" name="FirstName">
</label>
<span id="errorFirstName" class="hidden error">*Field cannot be blank
</span>
</p>
<p>
<label>Last Name:
<input type="text" id="LastName" name="LastName">
</label>
<span id="errorLastName" class="hidden error">*Field cannot be blank
</span>
</p>
<p>
<label>Age:
<input class="numeric" type="text" id="Age" name="Age">
</label>
<span id="AgeNotNumeric" class="hidden error">*Age should be a number
</span>
<span id="errorAge" class="hidden error">*Field cannot be blank
</span>
</p>
<button type="submit" name="submit">continue
</button>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.