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")">

Answer 2

onchange="checkPassword()"

means call function checkPassword without arguments when onchange event occurs on your input field.

There is no checkPassword function defined in your JavaScript, you either forgot to post it here or you meant to call ns.init.