Parse error. missing ; before statement. Also doubts about onchange

Question

I want to compare two String in jQuery and if they are the same I show the submit button if not an error message in the web page:

 (function(){
  var tw = window.tw,
    ns = tw.resetpassword = {},
    lib = tw.lib,
    _ = tw.util;

  ns.init = function(){
    $('#password1').checkPassword(){
      var password1 = $('#password1').val()
      console.log(password1);
      var password2 = $('#password2').val()
      console.log(password2);

      if(password1==password2){
        $("#reset-password").removeAttr("style");
        console.log('yes!');
      }else{
        $("#alert-error").removeAttr("style");
      }
    }
    $('#password2').checkPassword(){
      var password1 = $('#password1').val()
      console.log(password1);
      var password2 = $('#password2').val()
      console.log(password2);

      if(password1==password2){
        $("#reset-password").removeAttr("style");
      }else{
        $("#alert-error").removeAttr("style");
      }
    }
  )};
})();

HMTL:

<form action="@securesocial.core.providers.utils.RoutesHelper.handleResetPassword(token).absoluteURL(IdentityProvider.sslEnabled)" autocomplete= "off" method="POST">

        <input class="form-text" id="password1" name="password.password1" type="password" maxlength="128" size="60"  onchange="checkPassword()" placeholder="@Messages("securesocial.passwordChange.newPassword1")">

        <input class="form-text" id="password2" name="password.password2" type="password" maxlength="128" size="60" onchange="checkPassword()" placeholder="@Messages("securesocial.passwordChange.newPassword2")">

        <input class="form-submit email" id="reset-password" type="submit" name="op" value="@Messages("securesocial.password.reset")" style="display:none">
       </form>
    </div>

    <div class="alert alert-error" id="alert-error" font color="red" style="display:none">
    <span style="color: red">@Messages("securesocial.password.error")</span>
    </div>

I get this error:

Parse error. missing ; before statement

in this line

$('#password1').checkPassword(){

I don't know if I'm doing it right with "onchange" neither, Any ideas?Thanks!

Answer 1

That is just not valid javascipt syntax!

$('#password1').checkPassword(){
  ...
}

It looks like a combination of calling a method (.checkPassword()) and defining a new function.

---

Looking at your html, it looks like you are trying to call this function checkPassword whenever the text changes in either password field:

<input class="form-text" id="password1" ...  onchange="checkPassword()" ...>

When using jQuery, you should avoid specifying the function inline, instead attach it using jQuery .on method

 ns.init = function(){
    $('#password1, #password2').on('change',function(){
      var password1 = $('#password1').val()
      console.log(password1);
      var password2 = $('#password2').val()
      console.log(password2);

      if(password1==password2){
        $("#reset-password").removeAttr("style");
      }else{
        $("#alert-error").removeAttr("style");
      }
    });
 }

(Note: no need to repeat the code twice, that code above attaches the same behaviour to both password1 and password2.)

You can also now remove that attribute from your html:

<input class="form-text" id="password1" name="password.password1" 
        type="password" maxlength="128" size="60" 
        placeholder="@Messages("securesocial.passwordChange.newPassword1")">