API tools faq
paste
neelu1

VALIDATION JAVASCRIPT

neelu1
Oct 6th, 2018
73
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.06 KB | None | 0 0
raw download clone embed print report
  1. 3. i) Create a page with JavaScript to do the following. These can all be on one page.
  2. (a) Prompt the user for their name.
  3. (b) Use a pop-up box to welcome the user by name.
  4. (c) Display the current date on the page in the following format: April 30, 2018. Do not display the
  5. time. Do not"hard code" the date;
  6. (d) Display the last modified date of the document.
  7. (e) Put some useful advice, on any subject, in the status line of the browser.
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <title>LAB3</title>
  12. <link rel="stylesheet" href="main.css">
  13. </head>
  14. <body>
  15. <script>
  16. var name= window.prompt('Enter your name','First name');
  17. alert('Hey '+ name + '!, Welcome to the page !');
  18. function func1() {
  19. var d = new Date(2018,7,27);
  20. d.getDate();
  21. document.getElementById("date").innerHTML = d;}
  22. function func2() {
  23. var x = document.lastModified;
  24. document.getElementById("modified").innerHTML = x;}
  25. </script><br><br>
  26. <h2>Click the button to display the date.</h2>
  27. <button onclick="func1()">See Date</button><br>
  28. <h2 id="date"></h2><br>
  29. <h2>Click the button to display the date and time this document was last modified.</h2>
  30. <button onclick="func2()">See last modified date</button><br>
  31. <h2 id="modified"></h2><br><br>
  32. <p><h3>Note:<h3> <h4>Please try loin after some time if you find the page unavailabe.<h4></p>
  33. </body></html>
  34.  
  35.  
  36.  
  37. ii) Create a User Registration form with First Name, Last name, Address, City, State, Country, Pincode, Username and Password fields for a General login webpage and satisfy the following criteria. Create a validate ( ) function that does the following:
  38. (a) Checks that the First Name, Last Name, City, Country, Username, and Password1 fields
  39. are filled out.
  40. (b) Checks that the Pincodeis exactly 6 numeric’s.
  41. (c) Checks that the state is exactly two characters.
  42. (d) Checks that the email is a valid email address.
  43. • false if email has fewer than 6 characters
  44. • false if email does not contain an @ symbol
  45. • false if email does not contain a period (.)
  46. • true otherwise
  47. Code:
  48. <!DOCTYPE html>
  49. <html>
  50. <head><title>FORM</title>
  51. <link rel="icon" href="favicon.ico" type="image/png">
  52.  
  53. <style type="text/css">
  54. body{
  55. font-family:Times New Roman;}
  56. * {box-sizing: border-box;}
  57. .btn {
  58. background-color: green;
  59. color: white;
  60. padding: 10px 20px;
  61. border: none;
  62. cursor: pointer;
  63. margin-top: 15px;
  64. padding-left: 30px;
  65. width: 310px;
  66. height: 42px;
  67. font-size: 14px;
  68. box-shadow: 0 0 10px;
  69. opacity: 0.9; }
  70. .btn:hover {
  71. opacity: 1;
  72. background-color: tomato;
  73. }
  74. #form1{
  75. width: 500px;
  76. height: 1050px;
  77. margin: auto;
  78. padding: 20px 40px;
  79. background-color: powderblue;
  80. color: #333333;
  81. border: 2px solid #C2D6FF;
  82. border-radius: 10px;
  83. border-radius: 40px 0 40px 0;
  84. margin-top: 15px;
  85. }
  86. #email{
  87. background-image: url('envelope.png');
  88. background-repeat: no-repeat;
  89. background-position: 6px;
  90. border: 1px solid #DADADA;
  91. margin: 15px;
  92. padding-left: 35px;
  93. width: 310px;
  94. height: 30px;
  95. font-size: 14px;
  96. box-shadow: 0 0 10px; }
  97. #fname{
  98. background-image: url('avatar.png');
  99. background-repeat: no-repeat;
  100. background-position: 6px;
  101. border: 1px solid #DADADA;
  102. margin: 15px;
  103. padding-left: 35px;
  104. width: 310px;
  105. height: 30px;
  106. font-size: 14px;
  107. box-shadow: 0 0 10px; }
  108. #phone {
  109. background-image: url('phone-call.png');
  110. background-repeat: no-repeat;
  111. background-position: 5px;
  112. border: 1px solid #DADADA;
  113. margin: 15px;
  114. padding-left: 35px;
  115. width: 310px;
  116. height: 30px;
  117. font-size: 14px;
  118. box-shadow: 0 0 10px;}
  119. #address{
  120. background-image: url('1234.png');
  121. background-repeat: no-repeat;
  122. background-position: -2px;
  123. border: 1px solid #DADADA;
  124. margin: 15px;
  125. padding-left: 35px;
  126. width: 310px;
  127. height: 30px;
  128. font-size: 14px;
  129. box-shadow: 0 0 10px; }
  130. #password{
  131. background-image: url('key1.png');
  132. background-repeat: no-repeat;
  133. background-position: 2px;
  134. border: 1px solid #DADADA;
  135. margin: 15px;
  136. padding-left: 35px;
  137. width: 310px;
  138. height: 30px;
  139. font-size: 14px;
  140. box-shadow: 0 0 10px;}
  141. #cpassword{
  142. background-image: url('key1.png');
  143. background-repeat: no-repeat;
  144. background-position: 2px;
  145. border: 1px solid #DADADA;
  146. margin: 15px;
  147. padding-left: 35px;
  148. width: 310px;
  149. height: 30px;
  150. font-size: 14px;
  151. box-shadow: 0 0 10px;}
  152. #pcode{
  153. background-image: url('1234.png');
  154. background-repeat: no-repeat;
  155. background-position: -2px;
  156. border: 1px solid #DADADA;
  157. margin: 15px;
  158. padding-left: 35px;
  159. width: 310px;
  160. height: 30px;
  161. font-size: 14px;
  162. box-shadow: 0 0 10px;}
  163. label{ margin:10px; }
  164. #cont{align-content: center;}
  165. </style></head>
  166. <body align="center">
  167. <div id="form1">
  168. <h3 style="text-align:centre">REGISTRATION FORM</h3>
  169. <form style="margin:10%" name="form1" action="#" method="POST">
  170. <script language="Javascript">
  171. function Validate() {
  172. var password = document.getElementById("password").value;
  173. var confirmPassword = document.getElementById("cpassword").value;
  174. if (password != confirmPassword) {
  175. alert("Passwords do not match.");
  176. return false;
  177. }
  178. return true; }
  179. </script>
  180. <script language="Javascript">
  181. (function() {
  182. $('form > input').keyup(function() {
  183.  
  184. var empty = false;
  185. $('form > input').each(function() {
  186. if ($(this).val() == '') {
  187. empty = true;}
  188. });
  189.  
  190. if (empty) {
  191. $('#register').attr('disabled', 'disabled');
  192. } else {
  193. $('#register').removeAttr('disabled');
  194. }
  195. });
  196. })()
  197. </script>
  198. <div id="cont">
  199. <label for="Username"><b>Username:</b></label>
  200. <input id="fname" type="text" name="username" placeholder="username" required>
  201. <label for="Email-id"><b>Email-Id:</b></label>
  202. <input id="email" type="text" name="email" placeholder="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
  203. <label for="Password"><b>Password:</b></label>
  204. <input id="password" type="password" name="password" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" placeholder="Enter Password">
  205. <label for="Confirm Password"><b>Confirm Password:</b></label>
  206. <input id="cpassword" type="password" name="cpassword" required pattern="(?=^.{8,}$)((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$" placeholder="Retype Password">
  207. <label for="Phone No:"><b>Phone No:</b></label>
  208. <input id="phone" type="text" name="phoneno" placeholder="phonenumber" required pattern="^([0|\+[0-9]{1,5})?([7-9][0-9]{9})$">
  209. <label for="Address:"><b>Address:</b></label>
  210. <input id="address" type="text" name="Address" placeholder="Address" required pattern="^(\w*\s*[\#\-\,\/\.\(\)\&]*)+">
  211. <label for="Pincode"><b>Pincode:</b></label>
  212. <input id="pcode" type="text" name="pincode" placeholder="pincode" required pattern="^[1-9][0-9]{5}$">
  213. <div>
  214. <label>
  215. <input type="radio" name="radio" required>Female
  216. <span class="checkmark"></span>
  217. </label>
  218. <label>
  219. <input type="radio" name="radio" required>Male
  220. <span class="checkmark"></span>
  221. </label>
  222. </div>
  223. <div>
  224. <textarea name="message" rows="7" cols="30" placeholder="Write your comments here." required></textarea>
  225. </div>
  226. </div>
  227. <button type="submit" class="btn" onclick="return Validate()" onclick="this.disable=true;" >Register</button>
  228. <button type="reset" class="btn">Reset</button>
  229. </form> </div>
  230. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!