vn-dom v1.0.3

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>