Form validation (pure Sercrod)

This example shows how to validate a small form using Sercrod’s data, *input, and @submit. No external validation library is required.

Code

<serc-rod data='{
	"name": "",
	"email": "",
	"message": "",
	"errors": {},
	"submitted": false
}'>
	<form novalidate
		@submit="
			errors = {};
			submitted = false;

			if(!name){
				errors.name = 'Please enter your name.';
			}
			if(!email || !/^[^@]+@[^@]+$/.test(email)){
				errors.email = 'Please enter a valid email.';
			}
			if(!message){
				errors.message = 'Please enter a message.';
			}

			if(Object.keys(errors).length === 0){
				submitted = true;
			}

			event.preventDefault();
		"
	>
		<p>
			<label>
				Name
				<input type="text" *input="name">
			</label>
			<small *if="errors.name" *print="errors.name"></small>
		</p>

		<p>
			<label>
				Email
				<input type="email" *input="email">
			</label>
			<small *if="errors.email" *print="errors.email"></small>
		</p>

		<p>
			<label>
				Message
				<textarea rows="4" *input="message"></textarea>
			</label>
			<small *if="errors.message" *print="errors.message"></small>
		</p>

		<p>
			<button type="submit">Send</button>
		</p>

		<p *if="submitted">
			Form looks good. You can now send it to your server.
		</p>
	</form>
</serc-rod>

Sample