View the step-by-step solution to:

Use Jquery to validate email address 3. Modify the <head> element as follows: Add "Registration Form" as the title.

here is the assignment:

Use Jquery to validate email address


3. Modify the <head> element as follows:


a. Add "Registration Form" as the title.


b. Add a <script> element that references the jQuery file. (my file is in documents directory with program <script type="text/javascript" src="jquery-3.4.1.js"></script> )


c. Add an empty <script> element where you will place your jQuery script.


4. Add the following <form> element to the <body> section:


<form name="register" id="registerForm" action="submit"


method="post">


<label class="label" for="email">Email: </label>


<input type="text" name="email" id="email" size="48" />


<span class="error">please enter a valid email


address</span>


</form>


5. Preview in the browser.


6. Take a screenshot and paste it on the worksheet.


7. Add the following <style> element to the <head>section.


<style type="text/css">


.error {


display: none;


color: #FF0000;


font-size: 0.7em;


margin: 0px 0px0px 5px;


}


</style>


8. Add the following jQuery code:


$('#email').blur(function() {


var regexEmail= /[email protected][a-zA-Z0-9.-]+.[a-zAZ]{


2,4}$/;


var inputEmail = $(this).val();


var resultEmail = regexEmail.test(inputEmail);


if(!resultEmail) {


$(this).next('.error').css('display', 'inline');


}


else {


$(this).next('.error').css('display', 'none');


}


});


9. Test the code to verify that the following conditions exist. TIP: Test the code by viewing it in the


default browser. Do not preview it in the browser window because Tab does not cause the blur


event to occur.


a. The error displays when an invalid email is typed and you press Tab.


b. The error displays when nothing is typed and you press Tab.


c. The error does not display when you type a valid email address and press Tab.   (pressing Tab does not seem to test or change output)


Task 6: Using jQuery to Validate the Length of a Field


1. Add the following fields to the form:


<br /><br />


<label class="label" for="password">Password: </label>


<input type="text" name="password" id="password" size="48"


tabindex="1" />


<span class="error">please enter a valid password</span>


2. Write jQuery code that verifies that the password is not empty. The message should display


when the form is loaded and should not be hidden until the user types in the field. Here are


some tips:


3. Test to verify that the following conditions exist. Take a screenshot of each test and paste it on


your worksheet.


a. The message should be displayed when the form is loaded.


b. Leaving the password field blank and clicking on the Email field causes the password


error to remain displayed.


c. Typing a character and clicking away from the field causes the error to disappear.


-------------------------------------------------------------------------------


here is MY Code: (it is not accepting the tests, or bluring out or hiding password ... can you please fix it return it,

and let me know what was wrong?)



<!DOCTYPE html>



<html>


<head>


<style type="text/css">


.error {display: none;color: #FF0000;font-size: 0.7em;margin: 0px 0px0px 5px;}


</style>



<script type="text/javascript" src="jquery-3.4.1.js"></script>



 <script>


 $('#password').focusout(function() {


  if ($(this).val().length === 0) { //if password field is empty          


      $(this).hide();


      $('#password_default_value').show();


      $('#password_instructions').default_value('Enter a password'); //will clear on click


  }


});



$('#email').blur(function() {


var regexEmail= /[email protected][a-zA-Z0-9.-]+.[a-zAZ]{


2,4}$/;


var inputEmail = $(this).val();


var resultEmail = regexEmail.test(inputEmail);


if(!resultEmail) {


$(this).next('.error').css('display', 'inline');


}


else {


$(this).next('.error').css('display', 'none');


}


});


 </script>


<title>Registration Form</title>


</head>


<body>



<form name="register" id="registerForm" action="submit"


method="post">


<label class="label" for="email">Email: </label>


<input type="text" name="email" id="email" size="48" />


<span class="error">please enter a valid email


address</span>


<br /><br />


<label class="label" for="password">Password: </label>


<input type="text" name="password" id="password" size="48"


tabindex="1" />


<span class="error">please enter a valid password</span>



</form>




</body>


</html>

Recently Asked Questions

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

-

Educational Resources
  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question