5. Register Input - Required

Now that we have created a simple form, we can make the fields required. How does that work? It’s actually quite simple. We add the required property to a property when using register input. Now, when a WEM runtime event is triggered—such as a button click—and a property does not have a value, that event is ignored, and the WEM runtime remains on the same page.

Let's update our previous form script:

<? 
	register input @FirstName required = true
	register input @LastName required = true
?>
<? if @ShowErrors and IsEmpty(@FirstName) ?>
	<div class="alert alert-warning">Please fill in your first name.</div>
<? end ?>
<label>
	First name:
	<input type="text" name="<?attr OutputId(@FirstName) ?>" value="<?attr @FirstName ?>">
</label>
<? if @ShowErrors and IsEmpty(@LastName) ?>
	<div class="alert alert-warning">Please fill in your last name.</div>
<? end ?>
<label>
	Last name:
	<input type="text" name="<?attr OutputId(@LastName) ?>" value="<?attr @LastName ?>">
</label>
<?
	@ShowErrors := true
?>

Although it is not part of this chapter, we have added a @ShowErrors boolean view state field. This is to prevent errors from being displayed when the widget is first rendered, enhancing the user experience. We don’t want to show errors indicating that specific fields need to be filled in upon first viewing. We take advantage of the fact that, during the initialization of the widget, the view state properties are set to the value unknown.

Other than adding the required option to the register input, we didn’t do anything special. Fortunately, some features don’t have to be difficult to implement.