surveyjs validation not hitting backend, nothing in dev tools network tab, text box works as normal

Question

The following is json taken from my surveyjs implementation. Everything works properly in the 10 page survey except for page1 shown below. It loads fine and acts just like a text box should however, it should check with http://www.example.com/check_application_code.php onblur or when the person clicks next (I do not care which). I do not see errors in my console, I do not see anything happen in the network tab, and when I watch the access logs on the server there is not hit to the backend when clicking next.

{
  "showQuestionNumbers": false,
  "checkErrorsMode": "onValueChanged",
  "pages": [
    {
      "name": "page1",
      "description": "Application Code",
      "elements": [
        {
          "type": "text",
          "name": "applicationCode",
          "title": "You need an application code to apply. Please enter your code below.",
          "isRequired": true,
          "validators": [
            {
              "type": "async",
              "text": "Invalid application code.",
              "url": "http://www.example.com/check_application_code.php",
              "dataType": "json",
              "method": "get",
              "asyncValidators": [
                {
                  "name": "backendValidation",
                  "func": "function(params) { return params.hasOwnProperty('valid') && params.valid === true; }"
                }
              ]
            }
          ]
        }
      ]
    },

Here are the JS script I am using to load surveyjs:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/inputmask@5.0.3/dist/inputmask.js"></script>
<script src="https://unpkg.com/nouislider/dist/nouislider.min.js"></script>
<link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://unpkg.com/survey-jquery/survey.jquery.min.js"></script>
<script src="https://unpkg.com/surveyjs-widgets@1.9.97/surveyjs-widgets.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/nouislider/dist/nouislider.min.css" />

A screenshot of the JS textbox:

The back end does work. When I call it with a browser it shows up in the logs and replies with the following:

{"valid":false,"message":"No application code provided."}

Not sure where to turn to next to get this working. Any help is appreciated

score 0 · Answer 1 · answered Jul 17 '23 at 20:47

I was doing it wrong. You need to create a javascript function that will check the back end. As far as I know it is not built in to surveyjs. There is an example of this here: https://surveyjs.io/form-library/examples/javascript-async-form-validation/jquery

surveyjs validation not hitting backend, nothing in dev tools network tab, text box works as normal

1 Answers1