You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.0 KiB
102 lines
3.0 KiB
<form-component>
|
|
<div>
|
|
<form class="form" novalidate method="post" onsubmit={ (event) => ( state.validator.submit(event) ) }>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
email
|
|
<input type="email" class="field-text" name="email" />
|
|
</label>
|
|
<field-error name="email"></field-error>
|
|
</div>
|
|
<div class="field-group">
|
|
<label class="field-label">
|
|
password
|
|
<input type="password" class="field-text" name="password" />
|
|
</label>
|
|
<field-error name="password"></field-error>
|
|
</div>
|
|
<button class="button" type="submit">
|
|
Send
|
|
</button>
|
|
</form>
|
|
|
|
<div if={ state.result } class="panel color-text-contrast { state.class }">
|
|
<div class="panel__body">
|
|
<div class="content m-bottom-last-child-0">
|
|
{ state.result }
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
import * as riot from 'riot'
|
|
import FormValidator from './formValidator.js'
|
|
|
|
export default {
|
|
|
|
state:
|
|
{
|
|
result: undefined,
|
|
validator: undefined,
|
|
class: undefined
|
|
},
|
|
|
|
onMounted()
|
|
{
|
|
// creating formValidator
|
|
this.state.validator = new FormValidator(this.$('.form'), {
|
|
'email': {
|
|
'presence': true,
|
|
'email': true
|
|
},
|
|
'password': {
|
|
'presence': true
|
|
}
|
|
})
|
|
|
|
// adding on success
|
|
this.state.validator.onSuccess((event, data) => {
|
|
this.handleSuccess(event, data)
|
|
})
|
|
|
|
// adding on error
|
|
this.state.validator.onError((event, errors, data) => {
|
|
this.handleError(event, errors, data)
|
|
})
|
|
},
|
|
|
|
/**
|
|
*
|
|
* @param {object} event
|
|
* @param {array} data
|
|
*
|
|
*/
|
|
handleSuccess(event, data)
|
|
{
|
|
event.preventDefault()
|
|
|
|
this.state.class = 'background-color-success'
|
|
this.state.result = JSON.stringify(data)
|
|
this.update()
|
|
},
|
|
|
|
/**
|
|
*
|
|
*
|
|
* @param {object} event
|
|
* @param {array} errors
|
|
* @param {array} data
|
|
*
|
|
*/
|
|
handleError(event, errors, data)
|
|
{
|
|
this.state.class = 'background-color-danger'
|
|
this.state.result = JSON.stringify(errors)
|
|
this.update()
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</form-component> |