Question

Here is my form (it only contains the fields required for this exercise, there are actually 20 entry fields):

<form id="reg_form" action="/register_submit" method="post">
  <fieldset>
      <ul class="form-list">
        <li>
          <div style="width:500">
            <label for="Username" class="required">Username (5 characters minimum,<br />Only Letters, Numbers, '~', '%', '.', ':', '-' and '_' allowed)<em>*</em></label><br />
            <div class="input-box">
              <input type="text" name="Username" id="Username" value="{embed:Username}" title="Username" class="validate[required,minSize[5],custom[onlyLetNumSpec]] register_input" />
            </div>
          </div>
        </li>
        <li id="register-customer-password">
          <div style="width:500">
            <label for="Password" class="required">Password (5 characters minimum,<br />Only Letters, Numbers, '~', '%', '.', ':', '-' and '_' allowed)<em>*</em></label><br />
            <div class="input-box">
              <input type="Password" name="Password" id="Password" title="Password" class="validate[required,minSize[5],custom[onlyLetNumSpec]] register_input" />
            </div>
          </div>
          <br />
          <div style="width:500">
            <label for="confirm_password" class="required">Confirm Password<em>*</em></label>
            <div class="input-box">
              <input type="password" name="confirm_password" title="Confirm Password" id="confirm_password" class="validate[required,custom[onlyLetNumSpec],equals[Password],funcCall[checkUserPass]] register_input" />
            </div>
          </div>
          <div class="clear"></div>
         </li>
      </ul>
      <div class="button-set">
        <button class="button button-login" title="Create Account" type="submit">
          <span>
            <span>Create Account</span>
          </span>
        </button>
      </div>
  </fieldset>
</form>

Now, this is the function checkUserPass that is called on the validation after the confirm_password form field is filled and exited:

function checkUserPass(field, rules, i, options){
  $.ajax({type:'POST',
          url: '/json_api/ParticipantSelectByUser/', 
          data: {"Username":$("#Username").val(), "Password":$("#Password").val()},
          dataType: 'json', 
          success: checkUserPassResult,
          error:function (xhr, ajaxOptions, thrownError){
              alert(xhr.status);
              alert(thrownError);
          } // error
  });
}

function checkUserPassResult(data) {
  if(data.result.ParticipantID > 0) {
    /*--- There is already a user with this combination ---*/
    return options.allrules.checkUserPass.alertText;
  } // if(data.result)
}

I KNOW that there is a data.result returned and as such, there is already a user with that user/pwd combination.

However, there is never a validation message shown. I believe I have followed the correct way to do validation with a function call. I cannot use an ajax validation rule because of the need to pass both username and password to the ajax call. What seems to be the problem here? All my other validations on this form work just fine.

Here are the custom rules required for the above validations:

"onlyLetNumSpec": {
    // Good for database fields
    "regex": /^[0-9a-zA-Z_-~%.:]+$/,
    "alertText": "* Only Letters, Numbers, tilde(~), pct(%), period(.), colon(:), hyphen(-) and underscore(_) allowed"
},
"checkUserPass": {
  "alertText": "* A User with the same Username and/or Password has been detected. Please change one of the entries."
}

Edit Note; I have updated the checkUserPass function to call another funstion in success.

Answer 1

You are using async ajax, so your return value is returned nowhere. You will have to call a function with your data. And you will have to prevent the submit with e.preventDefault() (!!!) outside the ajax function.

if(data.result) {
    function_to_validate_the_data(data.result);
} // if(data.result)