10. Input Validation

At the moment there's nothing stopping you from creating a blank item on the "Add New Item" view our the Punch List app. That's where Input Validations come into play. To force the user to enter something in an input component, set its required property to true, and then set the validate property of the button to true as shown below in the add_new.xml file:

<!-- Variables go here: -->
<var name="item" type="item" />

<!-- Components go here: -->
<capture-photo bind="item.photo" required="true" />
<text-input bind="item.comments" required="true" />

<button label="Save Item" on-press="saveItem" validate="true" style="solid" />

When the user presses the button, all of the input components that have required set to true will be validated first, before the action that the button is supposed to trigger takes place.

Test App on Device

Sync your app to ensure it has the latest code update and try to add a blank punch list item. You'll see that invalid fields are highlighted as seen below:

Desktop

Mobile

Custom Validations in JavaScript

Any custom validations that you'd like to perform can be done in the JavaScript. You can create complex logic or business rules in the JavaScript using conditionals, regular expressions, and so on, and then determine whether or not to allow the user to proceed depending on those validations.

Further Validations for punch List App

Let's force the user to enter at least 5 characters when entering comments for the punch list item they want to save (We realize this is not the most practical validation, but it serves as a good practical example). To do that, we are going to add a custom validation in the JS that we will execute before we save and dismiss. Checking the length of the comments field is pretty easy in JS, since it is a string we can use the .length property. So, we want to validate that the length is at least 5 characters long, if not, we want to give the user a notification telling them what is wrong and also stop the code from saving the item and dismissing.

Therefore, in your add_new.js, update your saveItem() function to the following:

function saveItem() {
    if (view.item.comments.length < 5) {
        notification.error("Please add more comments");
        return;
    }

    dismiss();
}

The condition of the if statement will catch all cases where the number of characters in the comments field is less than 5, then it will trigger an error notification with our custom message and finally the return statement will exit the function before it reaches our dismiss() statement - this ensures the changes are not saved and the user will remain on this view until they fix the problem.

Test App on Device

Go ahead and try it out on your device. If you try to save an item with fewer than 5 characters in the comments field, you should get an error that looks like this.

Next Up: View Existing Punch List Items

Next up we want to provide users with the ability to view the details of an existing punch list item and we will be creating a new view called view_item to accomplish this. Before we can complete this feature though, we first need to learn about View Parameters in the next section.