Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Required form field
Required form field
Untouched
focus -> Untouched
blur -> Untouched
enter valid input -> Valid
enter invalid input -> Invalid
submit form -> Invalid
Invalid
focus -> Invalid
blur -> Invalid
enter valid input -> Valid
enter invalid input -> Invalid
submit form -> Invalid
Valid
focus -> Valid
blur -> Valid
enter valid input -> Valid
enter invalid input -> Invalid
submit form -> Done
Done
function render(model){
const state = model.active_states[0].name;
if (state === "Done") {
return $("div", "Done!");
} else {
return (
$("div",
{},
$("label", { for: "input" }, "Email (required)"),
$("br"),
$("input", {
id: "input",
type: "text",
placeholder: "alice@example.com",
onFocus: () => model.emit("focus"),
onBlur: () => model.emit("blur"),
onInput: event => event.target.value.includes('@') ? model.emit("enter valid input") : model.emit("enter invalid input")
}),
$("br"),
state === 'Invalid'
? $("div", { style: { color: "red" } }, "Please enter a valid email address")
: state === 'Valid'
? $("div", { style: { color: "green" } }, "Looks good!")
: $("div", { style: { visibility: "hidden" } }, "."),
$("br"),
$("button",
{
disabled: state === "Invalid",
onClick: () => model.emit("submit form")
},
"Submit"
)
)
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.