423,873 Members | 2,170 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,873 IT Pros & Developers. It's quick & easy.

How can get my ajax method to properly valid textboxes?

P: 74
How can I validate each of (upper textboxes) using JQuery validation plugin (which is the current code you see below) in order to see if the username and password is correct and if they are not correct, display the error messages in red below each respective textbox. Here is my code. Any suggestions would be help.

Expand|Select|Wrap|Line Numbers
  1. <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
  2.  
  3.     <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  4.   </div>
  5.   <br/>
  6.  
  7.   <div class="content">
  8.     <div class="row top">
  9.       <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
  10.       <div class="login">
  11.         <label class="username-label" for="username-part1">Username</label> 
  12.          <input class="existing1-username-input-textbox" type="text" value=""> 
  13.          <span id="username_error1">*</span><br><br>
  14.  
  15.         <label class="password-label" for="password-part2">Password</label>
  16.         <input class="existing2-password-input-textbox" type="password" value="">
  17.         <span id="password_error2">*</span><br>
  18.         <button id="button1">Log in</button>
  19.       </div>
  20.     </div>
  21.     <hr/>
  22.     <div class="row bottom">
  23.       <p id="para2">New users, please create a new account by providing us with some basic information.</p>
  24.  
  25.       <div class= "new_customers_info">
  26.  
  27.         <label class="Username-label1" for="new-user-name-part-1">Username</label>
  28.         <input class="username-new-input-textbox" type="text" value="">
  29.          <br/><br/>
  30.  
  31.         <label class="Password-label2" for="password-new-part2">Password</label>
  32.         <input class="password-new-input-textbox" type="password" value="">
  33.          <br/><br/>
  34.  
  35.         <label class="Email-label3" for="email-new">Email Address</label>
  36.          <input class="email-new-input-textbox" type="email" value="" >
  37.           <br/><br/>
  38.  
  39.         <label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
  40.          <input class="reenter-new-input-textbox" type="email" value="">
  41.  
  42.         <button id="button2">Create Account</button>
  43.       </div>
  44.     </div>
  45.   </div>
  46.    <br/>
  47.   <footer>Cuyahoga Community College</footer>
  48.   <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
  49. </div>
  50.     <script src="Home.js"></script>
  51. </body>
  52. </html>
Expand|Select|Wrap|Line Numbers
  1. intro h1 {
  2.   font-family: 'Cambria';
  3.   font-size: 16pt;
  4.   font: bold;
  5.   text-align: left;
  6. }
  7.  
  8. .intro p {
  9.   font-family: 'Calibri';
  10.   font: italic;
  11.   font-size: 12pt;
  12.   padding: 0px 690px 0px 20px;
  13.   text-align: left;
  14. }
  15.  
  16. .content {
  17.   border: 2px solid;
  18.   -webkit-border-radius: 10px;
  19.   -moz-border-radius: 10px;
  20.   border-radius: 10px;
  21. }
  22.  
  23. #para1 {
  24.   padding: 0px 1050px 0px 20px;
  25. }
  26.  
  27. #para2 {
  28.   padding: 0px 1099px 0px 20px;
  29. }
  30.  
  31. .username-label,
  32. .password-label {
  33.  margin: 10px 0px 0px 300px;
  34.  position: relative; 
  35.  top: -70px; 
  36. }
  37.  
  38. .existing1-username-input-textbox, 
  39. .existing2-password-input-textbox
  40. {
  41.     top: -70px; 
  42.      position: relative; 
  43.  
  44. }
  45.  
  46. #button1{ 
  47.      background-color: #add8e6;
  48.      margin-left: 390px; 
  49.      position: relative; 
  50.      top: -50px; 
  51.     -webkit-border-radius: 10px;
  52.   -moz-border-radius: 10px;
  53.   border-radius:10px;
  54.   padding: 0px 20px 0px 20px; 
  55. }
  56.  
  57. #button2{
  58.   background-color: #add8e6;
  59.   margin-left: -200px; 
  60.   position: relative; 
  61.   top: -30px; 
  62.  -webkit-border-radius: 10px;
  63.   -moz-border-radius: 10px;
  64.   border-radius: 10px;
  65.   padding: 0px 20px 0px 20px; 
  66.  
  67. }
  68.  
  69.  
  70. .Username-label1, 
  71. .Password-label2,           
  72. .Email-label3, 
  73. .Repeat-Email-label4 
  74. {
  75.   margin: 0px 0px 0px 300px;
  76.   position: relative; 
  77.   top: -70px; 
  78. }
  79. .username-new-input-textbox, 
  80. .password-new-input-textbox, 
  81. .email-new-input-textbox, 
  82. .reenter-new-input-textbox{ 
  83.   position: relative;
  84.    top: -70px;
  85.   margin-left: 20px; 
  86.  
  87.  
  88. span{
  89.  
  90.  color: red; 
  91. }
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("button1").addEventListener("click", mouseOver1);
  2.  
  3. function mouseOver1(){
  4.  
  5.    document.getElementById("button1").style.color = "red";
  6.  
  7. }
  8.  
  9.  
  10. document.getElementById("button2").addEventListener("click", mouseOver); 
  11.  
  12.  
  13.     function mouseOver(){ 
  14.  
  15.       document.getElementById("button2").style.color = "purple";
  16.    }
  17.  
  18.  
  19.  
  20. $("#button1").hover(function() {
  21.     $(this).css('cursor','pointer');
  22. }); 
  23.  
  24. $("#button2").hover(function() {
  25.     $(this).css('cursor','pointer');
  26. }); 
  27.  
  28. $(document).ready(function(){
  29.  $(".login").validate({
  30.       rules: {
  31.        existingUsername: {
  32.        required: true, 
  33.        minlength: 10
  34.      },
  35.        existingPassword:{
  36.        required: true, 
  37.        minlength: 10 
  38.       }
  39.  
  40.        messages: {
  41.           existingUsername: {
  42.            required: "You must enter a valid existing user account", 
  43.            minlength: "Your username must be at least 10 characters long"
  44.           }, 
  45.            existingPassword: {
  46.            required: "You must enter a valid password associated with an account", 
  47.            minlength: "Your username must be at least 10 characters long"
  48.          }
  49.  
May 7 '17 #1
Share this Question
Share on Google+
2 Replies


P: 74
@Dormilich Can you help me?
May 7 '17 #2

Frinavale
Expert Mod 5K+
P: 9,731
Corrected HTML so that is valid against the w3c validator.

Mainly what was wrong was that you didn't have IDs for your inputs, and you didn't close your input tags, and you were missing some starting <div> tags.

Anyways, this is the corrected HTML
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head><title>
  4. Cuyahoga Community College Student Services</title>
  5. </head>
  6. <body>
  7. <div>
  8.     <h1>Welcome to Cuyahoga Community College Student Services Online</h1>
  9.      <div>
  10.         <p>Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.</p>
  11.       </div>
  12.       <br/>
  13.  
  14.       <div class="content">
  15.         <div class="row top">
  16.           <p id="para1">Already have an account with us? Returning users may log in by entering their site username and password. </p>
  17.           <div class="login">
  18.             <label class="username-label" for="username-part1">Username</label> 
  19.              <input class="existing1-username-input-textbox" type="text" value="" id="username-part1"/> 
  20.              <span id="username_error1">*</span><br><br>
  21.  
  22.             <label class="password-label" for="password-part2">Password</label>
  23.             <input class="existing2-password-input-textbox" type="password" value="" id="password-part2" />
  24.             <span id="password_error2">*</span><br>
  25.             <button id="button1">Log in</button>
  26.           </div>
  27.         </div>
  28.         <hr/>
  29.         <div class="row bottom">
  30.           <p id="para2">New users, please create a new account by providing us with some basic information.</p>
  31.  
  32.           <div class= "new_customers_info">
  33.  
  34.             <label class="Username-label1" for="new-user-name-part-1">Username</label>
  35.             <input class="username-new-input-textbox" type="text" value="" id="new-user-name-part-1" />
  36.              <br/><br/>
  37.  
  38.             <label class="Password-label2" for="password-new-part2">Password</label>
  39.             <input class="password-new-input-textbox" type="password" value="" id="password-new-part2" />
  40.              <br/><br/>
  41.  
  42.             <label class="Email-label3" for="email-new">Email Address</label>
  43.              <input class="email-new-input-textbox" type="email" value=""  id="email-new" />
  44.               <br/><br/>
  45.  
  46.             <label class="Repeat-Email-label4" for="repeat-new-email">Repeat Email Address</label>
  47.              <input class="reenter-new-input-textbox" type="email" value="" id="repeat-new-email" />
  48.  
  49.             <button id="button2">Create Account</button>
  50.           </div>
  51.         </div>
  52.       </div>
  53.        <br/>
  54.       <footer>Cuyahoga Community College</footer>
  55.       <footer>700 Carnegie Avenue, Cleveland, Ohio, 44115</footer>
  56.     </div>
  57.         <script src="Home.js"></script>
  58.     </body>
  59.     </html>
I started looking at this problem using jsFiddle here but I didn't get very far with it...at a quick glance looks like you haven't properly hooked up the validation to match up with your element names etc.
Sep 11 '17 #3

Post your reply

Sign in to post your reply or Sign up for a free account.