validateInput( )

Validates an input form field value against the registration form as defined in the site Dashboard.

Description

The validateInput() function returns {valid: true} if the value in the specified field is valid or throws an error if it is not valid.

You may want to call the validateInput() function in an input element's onCustomValidation() event handler to validate an input while the form is being filled out.

Note: To work with the Wix Events API, you need to publish your site.

Syntax

function validateInput(inputName: string, formValues: Array<FormValue>): ValidationResult

validateInput Parameters

NAME

TYPE

DESCRIPTION

inputName

string

Name of the input field to validate.

formValues

Array<FormValue>

Field names and values for a registration form.

Returns

An object representing whether the input value is valid.

Return Type:

ValidationResult

NAME

TYPE

DESCRIPTION

valid

boolean

Indicates that the registration form field(s) are valid.

Was this helpful?

Validate a registration form value

Copy Code

1import wixEventsFrontend from 'wix-events-frontend';
2
3// ...
4
5const eventId = // Get the event ID
6let form;
7
8wixEventsFrontend.getForm(eventId)
9  .then((result) => {
10    form = result;
11  });
12
13// ...
14
15let formValues = // get form values
16
17try {
18  form.validateInput("firstName", formValues);
19  // handle case where firstName is valid
20} catch(error) {
21  // handle case where firstName is not valid
22  let message = error.message; // "First Name is required"
23  let type = error.errorType; // "EMPTY_INPUT"
24  let inputId = error.inputId; // firstName
25}

Validate a form value in an element's onCustomValidation() handler

Copy Code

1import wixEventsFrontend from 'wix-events-frontend';
2
3// ...
4
5const eventId = // Get the event ID
6let form;
7
8wixEventsFrontend.getForm(eventId)
9  .then((result) => {
10    form = result;
11  });
12
13// ...
14
15let formValues = // get form values
16
17// ...
18
19$w("#firstName").onCustomValidation((value, reject) => {
20  try {
21    form.validateInput("firstName", formValues);
22  } catch(error) {
23    let message = error.message; // "First Name is required"
24    let type = error.errorType; // "EMPTY_INPUT"
25    let inputId = error.inputId; // firstName
26    reject(`Error ${error}`);
27  }
28});

Create and submit a registration form

Copy Code

1import wixEventsFrontend from 'wix-events-frontend';
2import wixData from 'wix-data';
3
4$w.onReady(function () {  
5  let eventId;
6
7  // Run a query that returns only one event. Add
8  // additional filtering to the query if necessary.
9  wixData.query("Events/Events")
10    .eq("title", "My Event")
11    .find()
12    .then((results) => {
13      if (results.items.length > 0) {
14        eventId = results.items[0]._id;
15      } else {
16        console.log("Could not find event");
17      }
18    });
19  
20  $w("#submit").onClick(() => {
21    const formValues = getFormValues();
22
23    wixEventsFrontend.rsvp.createRsvp(eventId, formValues)
24      .then((result) => {
25        console.log("RSVP created.")
26      })
27      .catch((error) => {
28        console.log(`Error message: ${error.message}`);
29        if (error.fields) {
30          console.log(`Incorrect fields: ${error.fields}`);	
31        }
32      });	
33  });
34});
35
36function getFormValues() {
37  return [
38    {"name": "rsvpStatus", "value": "YES"},
39    {"name": "firstName", "value": $w("#firstName").value},
40    {"name": "lastName", "value": $w("#lastName").value},
41    {"name": "email", "value": $w("#email").value},
42    {"name": "custom", "value": $w("#foodAllergies").value},
43
44    // When a form contains an address, the way you format the
45    // address information for submission depends on what type
46    // of input elements you use to gather that information.
47
48    // Wix address input element.
49    {"name": "address", "value": $w("#address").value},
50
51    // Single element which is not an address
52    // input element, such as a text input.
53    {"name": "address", "value": [$w("#address").value]},
54
55    // Multiple elements for the
56    // various parts of an address.
57    {
58      "name": "address", 
59      "value": [
60        $w("#street").value,
61        $w("#city").value,
62        $w("#state").value,
63        $w("#country").value,
64        $w("#postalCode").value
65      ]
66    },
67
68    // When a form contains an input for adding more guests to an
69    // RSVP, format the guest names for submission in an array
70    // where each element is the full name of a guest.
71    {"name": "additionalGuests", "value": $w('#additionalGuests').value},
72    {
73      "name": "guestNames",
74      "value": [
75        `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
76        `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
77      ]
78    }
79  ];
80}