Client-side validation in Lift using jQuery validation plugin


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)

Selection_007

Advertisements

About Ruchi Agarwal

Experienced working in Scala/ Java as a Sr. Software Consultant at Knoldus Software LLP for around 4 years. Having good understanding of various technologies includes Play, AngularJS, MongoDB, LiftWeb, Akka, jQuery, Javascript, CSS etc. Certified in RAD (Rational Application Developer) for WebSphere Software and RFT (Rational Funtional Tester) for Java. Skilled professional focused on the basic business functions and creation of software. Having firm understanding of design methodology. Likes to work with responsibility, dedication and perseverance.
This entry was posted in Scala. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s