vn-dom
v1.0.3
Published
Writing and working html using javascript
Downloads
3
Readme
Create a form login
// file /gulp/view/account/login.js
var is = require('vn-is');
var $ = require('vn-dom');
var form_login = $({
submit_form: function (e) {
e.preventDefault();
is.start();
var error = form_login.children('error');
var btn = form_login.children('button');
var btn_value = btn.val();
var form = this;
var data = {
email: form.email.value,
pass: form.pass.value
};
if(!(is.email(data.email)||is.id(data.email)||is.phone(data.email)||is.username(data.email))){
error.html(is.get('email'));
return form.email.focus();
}else if(!is.pass(data.pass)){
error.html(is.get('pass'));
return form.pass.focus();
}else{
error.html('');
btn.disable().val(lang.button.loading);
$.post('/account/login.php', data, function(json){
if(json){
var o = JSON.parse(json);
if(o.error){
//
}else{
window.location = '/';
}
};
btn.disable(false).val(btn_value);
});
}
},
render: function(){
return(
this.div({className: 'row'},
this.form({className: 'account', onsubmit: this.submit_form},
this.error('error'),
this.div({className: 'input-group'},
this.email(lang.placeholder.email),
this.pass(lang.placeholder.pass)
),
this.div({className: 'input-group clearfix', style: 'border: none;'},
this.submit({className: 'btn btn-primary btn-sm account-btn pull-right'}, lang.button.login)
)
)
)
)
}
});
module.exports = form_login;
// file: /gulp/finish/account.js
var form_login = require("./../view/account/login");
$('#content').append(form_login);
// or
$('#content').html(form_login);
Result for html
<div class="row">
<form class="account" action="#" method="POST">
<div class="error"></div>
<div class="input-group">
<input class="form-control" name="email" placeholder="Your email or phone number" maxlength="120" type="text">
<input type="password" name="pass" class="form-control" maxlength="120" placeholder="Your password">
</div>
<div class="input-group clearfix" style="border: none;">
<button class="btn btn-primary btn-sm account-btn pull-right" type="submit">Login</button>
</div>
</form>
</div>