Client-side validation in Lift using jQuery validation plugin

Table of contents

Reading Time: 2 minutes

Lift is the most powerful, most secure web framework available today. Lift strongly supports the server side validation in various ways. Lets talk about the Client side validation in the Lift application on Ajax forms.

jQuery validation plug-in widely used for client side form validation and this makes it easy. The plug-in comes bundled with a useful set of validation methods.

Here is the steps to start with code:

Ajax form html template


<form data-lift="form.ajax?class=validateForm">
<div data-lift="ValidationDemo">
<div id="form-content">
<fieldset>
<div>
<label for="firstname">First Name</label>
<input type="text" name="firstname">
</div>
<div>
<label for="lastname">Last Name</label>
<input type="text" name="lastname">
</div>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="password">Password</label>
<input type="password" name="password">
</div>
<div>
<input type="submit" value="Submit">
</div>
</fieldset>
</div>
</div>
</form>

Apply jQuery validation on form (Add following in the js file)


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

$(".validateForm").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
}
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address"
}
});

Snippet to process Ajax form

Now, we need to validate ajax form by jQuery validation before sending it to server. The task is to add JavaScript call before submit.


object ValidationDemo {

/**
* ajax submit that does some js before sending
*/
def ajaxSubmit(value: String, before: JsCmd, func: () => JsCmd, attrs: SHtml.ElemAttr*): Elem = {
val funcName = "z" + Helpers.nextFuncName
addFunctionMap(funcName, contextFuncBuilder(func))
(attrs.foldLeft(<input type="submit" name={ funcName }/>)((a, b) => b.apply(a))) % new UnprefixedAttribute("value", Text(value), Null) %
new UnprefixedAttribute("onclick", ("if(" + before.toJsCmd.replace(';', ' ') + ") {" +
";liftAjax.lift_uriSuffix = '" + funcName + "=_'; return true; } else return false;"), Null)
}

def render = {
"type=submit" #> ajaxSubmit("Submit", Run("$('.validateForm').valid()"), () =>

// server code
Run(s"alert('Welcome ${S.param("firstname").getOrElse("")} ${S.param("lastname").getOrElse("")}')"))
}

}

The alert dialogue would not appear until form is validated.

Validation messages will look like : (you can style it as you want)