Hey so I have most of my project done. What I can\'t figure out is how to make m
ID: 3535896 • Letter: H
Question
Hey so I have most of my project done.
What I can't figure out is how to make my onblur events to pop up when validating the input.
for example. When you type in the name field if a user types "123?" i want an onblur event to appear right underneath the input field stating that their input needs to be valid.
i have all the code for it but must have something wrong somewhere. if someone could please fix JUST the onblur part of javascript to make this happen that would be lovely.
Here is a link to my final project incase you would like to see it in action:
http://web4students.montgomerycollege.org/courses/Spring2013/Rockville/CA27633661/student08/finalProject/finalProject-Roxi.html
Here is also a link to a previous assignment where the onblur events are working how i want it to:
http://web4students.montgomerycollege.org/courses/Spring2013/Rockville/CA27633661/student08/hw7-Roxi.html
i want there to be a validation onblur event for fields: first name, last name, email, bio, home phone, and mobile phone.
lastly, I am not worried about it, but a brief bio is part of the "requirements" and it's the only one that I cant get to show up in the validationerror div when i click submit. if anyone knows what wrong there that would be a plus.
this here is my html and javascript code: although you should probably visit my project site to just copy and paste from view source there
<html>
<!-- ------this stuff doesn't matter so i took it out to save you some reading---- -->
<article class="containter">
<form method="get" action="finalActionPage.html" id="conferenceForm">
<legend><h1>Conference Registration Form</h1></legend>
<table>
<th colspan="2">
Plese Fill Out the Form
</th>
<!-- FIRST NAME -->
<tr>
<td> <label for="">Your First Name*</label> </td>
<td> <input type="text" name="name" autofocus id="firstName"> <div id="firstNameError" class="error"> </div> </td>
</tr>
<!-- SECOND NAME -->
<tr>
<td> <label for="">Your Last Name*</label> </td>
<td> <input type="text" name="name" id="lastName"> <div id="lastNameError" class="error"> </div> </td>
</tr>
<!-- AGE -->
<tr>
<td> <label for="">Age</label> </td>
<td> <input type="range" min="0" max="100" name="age" step="1" value="0" id="age"> <div id="output"> </div> </td>
</tr>
<!-- EMAIL -->
<tr>
<td> <label for="">Please enter your e-mail*</label> </td>
<td> <input type="email" name="email" id="email"> <div id="emailError" class="error"> </div> </td>
</tr>
<!-- LEVEL -->
<tr>
<td> <label for="">Experience Level*</label> </td>
<td>
<select id="level">
<option value=""></option>
<option value="Beginner">Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advance">Advance</option>
</select>
<div id="expLevelError" class="error"> </div>
</td>
</tr>
<!-- BIO -->
<tr>
<td><label for="">Please Write A Brief Bio*</label></td>
<td><textarea cols="22" rows="5" name="bio" id="bio"> </textarea> <div id="bioError" class="error"> </div> </td>
</tr>
<!-- URL-->
<tr>
<td><label for="">What Is Your Personal Website?</label></td>
<td> <input type="url" name="url" id="url" value="http://www."> </td>
</tr>
<!-- HOME PHONE-->
<tr>
<td><label for="">Home Phone Number</label></td>
<td> <input type="text" name="homePhone" id="homePhone"> <div id="homePhoneError" class="error"> </div> </td>
</tr>
<!-- MOBILE PHONE-->
<tr>
<td><label for="">Mobile Phone Number</label></td>
<td><input type="text" name="mobilePhone" id="mobilePhone"><div id="mobilePhoneError" class="error"> </div></td>
</tr>
<!-- MEAL PREFERENCE-->
<tr>
<td> <label for="">What Is Your Meal Preference?*</label></td>
<td>
<input type="radio" name="mealPreferenceOption" value="1" />À la carte <br>
<input type="radio" name="mealPreferenceOption" value="2" />Gluten intolerant meal <br>
<input type="radio" name="mealPreferenceOption" value="3" />Kosher <br>
<input type="radio" name="mealPreferenceOption" value="4" />Jain meal <br>
<input type="radio" name="mealPreferenceOption" value="5" />Muslim <br>
<input type="radio" name="mealPreferenceOption" value="6" />Vegetarian <br>
<input type="radio" name="mealPreferenceOption" value="7" />Vegan <br>
</td>
</tr>
<!-- SKILLS-->
<tr>
<td> <label for="">Skills (at least one)*</label></td>
<td>
<input type="checkbox" id="skill1" name="skills" value="HTML"> HTML <br>
<input type="checkbox" id="skill2" name="skills" value="CSS"> CSS <br>
<input type="checkbox" id="skill3" name="skills" value="JavaScript"> JavaScript <br>
<input type="checkbox" id="skill4" name="skills" value="jQuery"> jQuery <br>
<input type="checkbox" id="skill5" name="skills" value="Dojo"> Dojo <br>
<input type="checkbox" id="skill6" name="skills" value="Prototype"> Prototype <br>
<input type="checkbox" id="skill7" name="skills" value="Flash"> Flash <br>
<input type="checkbox" id="skill8" name="skills" value="Flex"> Flex <br>
</td>
</tr>
<tr>
<td colspan="2">
<label for="requirementErrors"> </label>
<div id="requirementErrors"></div>
<input type="submit" value="Submit">
</td>
</tr>
<tr>
<td colspan="2">*Required</td>
</tr>
</table>
</form>
</article>
</section>
<!-- --------------------------------THIS IS WHERE THE FUN STARTS----------------------- -->
<script type="text/javascript">
/* Form submit handler */
var conferenceForm = document.getElementById('conferenceForm');
conferenceForm.onsubmit = function() {
var result = true;
var errors = [];
//REQUIRED STUFF
// first name required
if (isEmpty(this.firstName.value) === true) {
errors.push('First name is required');
}
// last name required
if (isEmpty(this.lastName.value) === true) {
errors.push('Last name is required');
}
// e-mail required
if (isEmpty(this.email.value) === true) {
errors.push('E-mail address is required');
}
// phone required
if (isPhone(this.mobilePhone.value) === false) {
errors.push('Please enter a valid mobile phone number');
}
*/
// exp level required
if (isEmpty(this.level.value) === true) {
errors.push('Experience level required');
}
//bio required
if (isEmpty(this.bio.value) === true) {
errors.push('Brief bio required');
}
// meal required
if (isChecked('mealPreferenceOption') === false) {
errors.push('Meal preference is required');
}
// skills required
if (isChecked('skills') === false) {
errors.push('Skill is required');
}
// if there were any errors
if (errors.length > 0) {
// display errors to user
showErrors(errors);
// cancel form submission
result = false;
}
return result;
};
//Blur events to check for validation
var firstNameInput = document.getElementById('fistName');
var lastNameInput = document.getElementById('lastName');
var emailInput = document.getElementById('email');
var expLevelInput = document.getElementById('level');
var bioInput = document.getElementById('bio');
var homePhoneInput = document.getElementById('homePhone');
var mobilePhoneInput = document.getElementById('mobilePhone');
firstNameInput.onblur = function() {
var errorDiv = document.getElementById('nameError');
if (isName(this.value)) {
errorDiv.innerHTML = '';
} else {
errorDiv.innerHTML = 'Valid first name is required';
}
};
lastNameInput.onblur = function() {
var errorDiv = document.getElementById('nameError');
if (isName(this.value)) {
errorDiv.innerHTML = '';
} else {
errorDiv.innerHTML = 'Valid last name is required';
}
};
emailInput.onblur = function() {
var errorDiv = document.getElementById('emailError');
if (isEmail(this.value)) {
errorDiv.innerHTML = '';
} else {
errorDiv.innerHTML = 'Valid email is required';
}
};
bioInput.onblur = function() {
var errorDiv = document.getElementById('bioError');
if (isBio(this.value)) {
errorDiv.innerHTML = '';
} else {
errorDiv.innerHTML = 'Brief bio is required';
}
};
homePhoneInput.onblur = function() {
var errorDiv = document.getElementById('homePhoneError');
if (isPhone(this.value)) {
errorDiv.innerHTML = '';
} else {
errorDiv.innerHTML = 'Valid home phone number is required';
}
};
mobilePhoneInput.onblur = function() {
var errorDiv = document.getElementById('mobilePhoneError');
if (isPhone(this.value)) {
errorDiv.innerHTML = '';
} else {
errorDiv.innerHTML = 'Valid mobile phone number is required';
}
};
/* Display logic */
function showErrors(errors) {
var errorsDiv = document.getElementById('requirementErrors');
var errorMessage = '';
// unhide the errors DIV
errorsDiv.style.display = 'block';
// create string with new errors
errorMessage = '<ul>';
for (var i = 0; i < errors.length; i++) {
errorMessage += '<li>' + errors[i] + '</li>';
};
errorMessage += '</ul>';
// reset errors with new ones
errorsDiv.innerHTML = errorMessage;
}
/* Validation functions */
function isEmpty(value) {
//value.length
if (value.length > 0) {
return false;
} else {
return true;
}
}
function isEmail(value) {
var pattern = /[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,50}/;
return pattern.test(value);
}
function isPhone(value) {
var pattern = /^(?d{3})?s?d{3}[-s]?d{4}$/;
return pattern.test(value);
}
function isChecked(name) {
// select elements on page by their name attribute
// use CSS to see how many are checked
// this works for both radio buttons and checkboxes
var checked = document.querySelectorAll('[name=' + name + ']:checked');
if (checked.length > 0) {
return true;
} else {
return false;
}
}
function isName(value) {
var pattern = /[a-zA-Z-]{2,50}/;
return pattern.test(value);
}
function isBio(value) {
var pattern = /[a-zA-Z .-!?]{2,100}/;
return pattern.test(value);
}
</script>
</body>
</html>
Explanation / Answer
You need to add the onblur to your input tags as well... i.e <input type='text' id='numbers' /><br />