How can get my ajax method to properly valid textboxes?

Question

document.getElementById("button1").addEventListener("click", mouseOver1);
 
functionmouseOver1(){
  document.getElementById("button1").style.color="red";
}

document.getElementById("button2").addEventListener("click",mouseOver);
functionmouseOver(){
  document.getElementById("button2").style.color="purple";
}

$("#button1").hover(function(){
  $(this).css('cursor','pointer');
});

$("#button2").hover(function(){
  $(this).css('cursor','pointer');
});

$(document).ready(function(){
  $('#button1').click(function(){
    $.ajax({
      data:{username:textbox1.val(),password:textbox2.val()
      },
      errors:function(){
        existing1-username-input-textbox:{
          required:"Youmustenteravalidexistinguseraccount.",
          minlength:"Yourusernamemustbeatleast10characterslong."
        },
        existing2-password-input-textbox:{
          required:"Youmustenteravalidpasswordassociatedwithanaccount.",
          minlength:"Yourusernamemustbeatleast10characterslong."
        }
      },
      success:function(){
        //usetheseanimatemethodsbelowifusernameandpasswordarecorrect:
        //$('#para1').animate({'left':'-105'});
        //$('.username-label').animate({'left':'-105%'});
        //$('.existing1-username-input-textbox').animate({'left':'-105%'});
        //$('.password-label').animate({'left':'-105%'});
        //$('.existing2-password-input-textbox').animate({'left':'-105%'});
        //$('#button1').animate({'left':'-105%'});
      }

    });
  });

introh1{
  font-family:'Cambria';
  font-size:16pt;
  font:bold;
  text-align:left;
}

.introp{
  font-family:'Calibri';
  font:italic;
  font-size:12pt;
  padding:0px690px0px20px;
  text-align:left;
}

.content{
  border:2pxsolid;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

#para1{
  padding:0px1050px0px20px;
}

#para2{
  padding:0px1099px0px20px;
}

.username-label,
.password-label{
  margin:10px0px0px300px;
  position:relative;
  top:-70px;
}

.existing1-username-input-textbox,
.existing2-password-input-textbox{
  top:-70px;
  position:relative;
}

#button1{
background-color:#add8e6;
  margin-left:390px;
  position:relative;
  top:-50px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:0px20px0px20px;
}

#button2{
background-color:#add8e6;
  margin-left:-200px;
  position:relative;
  top:-30px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  padding:0px20px0px20px;
}

.Username-label1,
.Password-label2,
.Email-label3,
.Repeat-Email-label4{
  margin:0px0px0px300px;
  position:relative;
  top:-70px;
}
.username-new-input-textbox,
.password-new-input-textbox,
.email-new-input-textbox,
.reenter-new-input-textbox{
  position:relative;
  top:-70px;
  margin-left:20px;
}

span{
  color:red;
}

        <h1>WelcometoCuyahogaCommunityCollegeStudentServicesOnline</h1>
      <p>CuyahogaCommunityCollegerecognizesstudents'rightstoaccesspersonalandacademicrecordsinaccordancewiththeFamilyEducationalRightsandPrivacyActof1974(FERPA)asamendedbyPublicLaw93-568.</p>
      </div>
      <br/>

      <divclass="content">
        <divclass="rowtop">
        <pid="para1">Alreadyhaveanaccountwithus?Returningusersmayloginbyenteringtheirsiteusernameandpassword.</p>
        <divclass="login">
          <labelclass="username-label"for="username-part1">Username</label>
          <inputclass="existing1-username-input-textbox"type="text"value="">
          <spanid="username_error1">*</span><br>
          <br>
          <labelclass="password-label"for="password-part2">Password</label>
          <inputclass="existing2-password-input-textbox"type="password"value="">
          <spanid="password_error2">*</span><br>
          <buttonid="button1">Login</button>
        </div>
      </div>
      <hr/>
      <divclass="rowbottom">
        <pid="para2">Newusers,pleasecreateanewaccountbyprovidinguswithsomebasicinformation.</p>
        <divclass="new_customers_info">
          <labelclass="Username-label1"for="new-user-name-part-1">Username</label>
          <inputclass="username-new-input-textbox"type="text"value=""><br/>
          <br/>
          <labelclass="Password-label2"for="password-new-part2">Password</label>
        <inputclass="password-new-input-textbox"type="password"value=""><br/>
        <br/>
        <labelclass="Email-label3"for="email-new">EmailAddress</label>
        <inputclass="email-new-input-textbox"type="email"value=""><br/>
        <br/>
        <labelclass="Repeat-Email-label4"for="repeat-new-email">RepeatEmailAddress</label>
        <inputclass="reenter-new-input-textbox"type="email"value="">

        <buttonid="button2">CreateAccount</button>
      </div>
    </div>
  </div>
  <br/>
  <footer>CuyahogaCommunityCollege</footer>
  <footer>700CarnegieAvenue,Cleveland,Ohio,44115</footer>
</div>
<scriptsrc="Home.js"></script>
</body>
</html>

Hello Everyone,

I am trying get this ajax method to work in order to validate input textfields for the upper boxes, but how can I get it to working?
What I am doing wrong?

I want it to work such that if a user inputs the wrong username and password, it display error messages and it won't animate the old content out to the left side.
How can I fix my ajax method?

The snippet above is already giving a hint «Uncaught SyntaxError: Unexpected token :» — Louys Patrice Bessette, May 07 '17 at 02:45
Well... I just indented your code correctly to make it readable... `$(document).ready(function(){` isn't closed. — Louys Patrice Bessette, May 07 '17 at 03:00
Within the ajax function... the `error` handler is intended to handle ajax communication error... not form validation errors. You have to validate the inputs BEFORE sending values via ajax. And (lol) there is no `url`!! Do you know what Ajax is ? — Louys Patrice Bessette, May 07 '17 at 03:04
@ Louys Patrice Bessette Are you telling me I can't use the ajax method then? I want to still use Ajax. Can I use ajax internally then? — User445555, May 07 '17 at 03:07
Ajax in intended to get external content. Not to validate user input. Ajax needs a `url` to got transport some data and come back with a result. — Louys Patrice Bessette, May 07 '17 at 03:09
@ Louys Patrice Bessette Yes, Ajax loads data from the server without refreshing the page. How can I get my ajax method to work. — User445555, May 07 '17 at 03:09
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143589/discussion-between-louys-patrice-bessette-and-user445555). — Louys Patrice Bessette, May 07 '17 at 03:10

score 1 · Accepted Answer · edited Jan 18 '21 at 12:37

Just to nail this question down...

After the nice chat discussion we had, you understood that Ajax is NOT usefull to do what you expect actually. And you undertood what it is usefull to.

So you don't have to use Ajax at all to validate one or more textboxes.
Instead, use jQuery Validate plugin (or some other plugin... There is plenty! Google "JavaScript validation")

A great SO answer I suggest you to look at is this one, where plenty users agreed on the fact that it is «much better than their actual documentation».

I think this plugin is the most used of all... At least the most known.

I also suggest you to read on https://en.wikipedia.org/wiki/Regular_expression, which is a way to find strings parts efficiently... And it can be used with the validation plugin above.

To conclude, this super usefull tool to test a regular expression is a must.

**--EDIT--**
Next step is: [using Ajax in the `submitHandler`][5]

How can get my ajax method to properly valid textboxes?

1 Answers1