Hemant Vishwakarma

Tuesday, 13 December 2016

Switch CSS Tabs (On / Off) With Checkbox's

Generate pure CSS3 On/Off flip switches with animated transitions.

HTML

<div class="form-group">
<label>HEMANT VISHWAKARMA</label>
<div class="onoffswitch">
<input type="checkbox" name="pets_allowed" class="onoffswitch-checkbox" id="pets_allowed" value="pets_allowed">
<label class="onoffswitch-label" for="pets_allowed">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>

CSS

<style>
.onoffswitch {
position: relative;
width: 65px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

.onoffswitch-checkbox {
display: none;
}

.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 0px solid #999999;
border-radius: 20px;
height: 25px;
}

.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: 300;
box-sizing: border-box;
}

.onoffswitch-inner:before {
content: "yes";
padding-left: 10px;
background-color: #41a541;
color: #FFFFFF;
margin-top: -3px;
}

.onoffswitch-inner:after {
content: "no";
padding-right: 10px;
background-color: #999;
color: #fff;
text-align: right;
margin-top: -3px;
}

.onoffswitch-switch {
display: block;
width: 20px;
margin: 2px;
background: #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
right: 40px;
border: 0px solid #999999;
border-radius: 20px;
transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}

.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
}

.box-body .box-title {
padding-top: 20px;
}
</style>

Switch CSS Tabs (On / Off) With Checkbox's

Monday, 5 December 2016

How to mobile number validation in JavaScript

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript mobile number validation</title>
<style type="text/css">
body {
font-family: Verdana, Geneva, sans-serif;
}

.error {
color: white;
background-color: rgb(247, 23, 23);
margin-left: 12px;
border-radius: 3px;
}

.dsNone {
display: none;
}

.success {
color: white;
background-color: green;
margin-left: 12px;
border-radius: 3px;
}

.algContent {
width: 100%;
margin: 0 auto;
}
</style>
</head>

<body>

<form id="form1" runat="server" style="margin-left: 28%;">
<div class="algContent">
<h1>Mobile Validation In JavaScript</h1>
</div>
<br>
<br>
<br>
<div class="algContent">
<div style="float:left;">
<span>Enter the Mobile No:</span> <span>
<input id="txtPhoneNo" type="text" onkeypress="return isNumber(event)" />
</span>
</div>
<div style="float:left;">
<span style="float:left;" id="errorMsg" class="dsNone error"></span><span style="float:left;" id="successMsg" class="dsNone success">
</span>
</div>
<br>
<br>
<input type="button" value="Submit" onclick="ValidateNo();">
</div>
</form>
<script type="text/javascript">
function isNumber(evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
var errorMsg = document.getElementById("errorMsg");
errorMsg.style.display = "block";
document.getElementById("errorMsg").innerHTML = " Please enter only Numbers. ";
return false;
}

return true;
}

function ValidateNo() {
var phoneNo = document.getElementById('txtPhoneNo');
var errorMsg = document.getElementById("errorMsg");
var successMsg = document.getElementById("successMsg");

if (phoneNo.value == "" || phoneNo.value == null) {
errorMsg.style.display = "block";
successMsg.style.display = "none";
document.getElementById("errorMsg").innerHTML = " Please enter your Mobile No. ";
return false;
}
if (phoneNo.value.length < 10 || phoneNo.value.length > 10) {
errorMsg.style.display = "block";
successMsg.style.display = "none";
document.getElementById("errorMsg").innerHTML = " Mobile No. is not valid, Please Enter 10 Digit Mobile No. ";
return false;
}

successMsg.style.display = "block";
document.getElementById("successMsg").innerHTML = " Success ";
errorMsg.style.display = "none";
return true;
}
</script>
</body>

</html>

How to mobile number validation in JavaScript

Thursday, 1 December 2016

Yii2 Ajax Validation and unique rules in active record

Yii2 Ajax Validation and unique rules in activeForm Field

View Page

frontend/views/site/signup.php

<?php

use yii\helpers\Html;
use yii\bootstrap\ActiveForm;

$this->title = 'Signup';
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="site-signup">
<h1><?= Html::encode($this->title) ?></h1>

<p>Please fill out the following fields to signup:</p>

<div class="row">
<div class="col-lg-5">
<?php $form = ActiveForm::begin([
'id' => $model->formname(),
enableAjaxValidation'=>true,
]); ?>

<?= $form->field($model, 'username')->textInput(['autofocus' => true]) ?>

<?= $form->field($model, 'email') ?>

<?= $form->field($model, 'password')->passwordInput() ?>

<div class="form-group">
<?= Html::submitButton('Signup', ['class' => 'btn btn-primary', 'name' => 'signup-button']) ?>
</div>

<?php ActiveForm::end(); ?>
</div>
</div>
</div>

Model

frontend/models/SignupForm.php

< ?php
namespace frontend\ models;

use yii\ base\ Model;
use common\ models\ User;

/**
* Signup form
*/
class SignupForm extends Model {
public $username;
public $email;
public $password;

/**
* @inheritdoc
*/
public
function rules() {
return [
['username', 'trim'],
['username', 'required'],
['username', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This username has already been taken.'],
['username', 'string', 'min' => 2, 'max' => 255],

['email', 'trim'],
['email', 'required'],
['email', 'email'],
['email', 'string', 'max' => 255],
['email', 'unique', 'targetClass' => '\common\models\User', 'message' => 'This email address has already been taken.'],

['password', 'required'],
['password', 'string', 'min' => 6],
];
}

/**
* Signs user up.
*
* @return User|null the saved model or null if saving fails
*/
public
function signup() {
if (!$this - > validate()) {
return null;
}

$user = new User();
$user - > username = $this - > username;
$user - > email = $this - > email;
$user - > setPassword($this - > password);
$user - > generateAuthKey();

return $user - > save() ? $user : null;
}
}

Controller

frontend/controllers/SiteController.php

<?php
namespace frontend\controllers;

use Yii;
use yii\base\InvalidParamException;
use yii\web\BadRequestHttpException;
use yii\web\Controller;
use yii\filters\VerbFilter;
use yii\filters\AccessControl;
use frontend\models\SignupForm;
use yii\helpers\Json;
use yii\widgets\ActiveForm;

class SiteController extends Controller
{

public function behaviors()
{
return [
'access' => [
'class' => AccessControl::className(),
'only' => ['logout', 'signup'],
'rules' => [
[
'actions' => ['signup'],
'allow' => true,
'roles' => ['?'],
],
[
'actions' => ['logout'],
'allow' => true,
'roles' => ['@'],
],
],
],
'verbs' => [
'class' => VerbFilter::className(),
'actions' => [
'logout' => ['post'],
],
],
];
}

public function actions()
{
return [
'error' => [
'class' => 'yii\web\ErrorAction',
],
'captcha' => [
'class' => 'yii\captcha\CaptchaAction',
'fixedVerifyCode' => YII_ENV_TEST ? 'testme' : null,
],
];
}

public function actionSignup()
{
$model = new SignupForm();

if(Yii::$app->request->isAjax && $model->load(Yii::$app->request->post()))
{
Yii::$app->response->format = 'json';
return ActiveForm::validate($model);
}

if ($model->load(Yii::$app->request->post())) {
if ($user = $model->signup()) {
if (Yii::$app->getUser()->login($user)) {
return $this->goHome();
}
}
}

return $this->render('signup', [
'model' => $model,
]);
}
}

Yii2 Ajax Validation and unique rules in active record