User password validation

When it comes to user registration, the users have a few things they expect. One is to get messages back on if the registration is valid and the second is two password fields to validate that you have written your password right the first time. In this document we will add these features.

Validation

First we will do two password field and validation on all fields that need to be filled in. A normal indication that a field must be filled in is a red *  or something turning green when the data is OK. We will demonstrate both in this version. We will also make the registration into a form where the labels are in front of the field instead of over like in the first iteration.

To add a red star after the field we will need to add som custom CSS to make the space and the start. Here are the code to add to the base.css

.required:after {
    content: "*";
    padding-left:1%;
    color:red;
}
.form-control{
    width:97%;
    float:left;
}

CSS to support * after field

To make the label come before the field we add a extra div around the label and the field to set the size of the field using the col-xs-x class.

<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">Username</label>
		</div>
		<div class="col-xs-10 required">
			[! field username !]
		</div>
	</div>
</div>

Code for each line

By adding the class required on the field, the CSS added will make the space for the red star at the end and add it. For the fields without the class nothing is added.

<h1>Register a user</h1>
<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">Username</label>
		</div>
		<div class="col-xs-10 required">
			[! field username !]
		</div>
	</div>
</div>
<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">First name</label>
		</div>
		<div class="col-xs-10">
			[! field firstname !]
		</div>
	</div>
</div>
<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">Last name</label>
		</div>
		<div class="col-xs-10">
			[! field lastname !]
		</div>
	</div>
</div>
<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">EMail</label>
		</div>
		<div class="col-xs-10 required">
			[! field email !]
		</div>
	</div>
</div>
<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">Password</label>
		</div>
		<div class="col-xs-10 required">
			[! field password !]
		</div>
	</div>
</div>
<div class="row">
	<div class="form-group">
		<div class="col-xs-2">
			<label for="">Password again</label>
		</div>
		<div class="col-xs-10 required">
			<input id="passwordagain" class="form-control  required" type="password" name="password">
		</div>
	</div>
</div>
<div class="row">
	<div class="form-group col-xs-12">
	[! button register !]
	</div>
</div><br>

The full code now

We have also added a check to see if all the field required are filled inn and until that is the case disabled the save button by adding the attribute disabled="disabled" in tag tail on the button and a javascript validation in jsready on the page definition.

$("input").on( "change", function() {
	var un=$("#username").val();
	var email=$("#email").val();
	var pw1=$("#password").val();
	var pw2=$("#passwordagain").val();
	if (un.length>0 && email.length>0 && pw1.length>0 && pw2.length>0) {
		if (pw1==pw2) {
			$("#register").removeAttr("disabled");		
		}
	} else {
		$("#register").attr("disabled","disabled");		
	}
});

The simplest possible javascript to do validation and enable disabled button

New user registration page on small screen