jFluent - Fluent Style jQuery Validation Plugin

Purpose

jFluent is a light-weight validation framework for client-side validation. It is a jQuery plugin that can be used in ASP .NET MVC. It can also be used in standard (or mobile) HTML websites (see section explaining use).

The source code is a free download. You can extend/modify the framework if needed.

JSFiddle demo of plugin:

http://jsfiddle.net/e3sfj/1/

Implementation

jFluent is implemented as a jQuery plugin with the following rules:

* - The validation function should return true or false.

Screen shot

Standard (or mobile) HTML website

color: #ff0000;

display: none;

color: #e80c4d;

font-weight: bold;

font-size: 1.1em;

display: none;

The plugin can be used in ASP .NET MVC as shown below.

The Register Model:



In the Register.cshtml page:

@model MvcApplication1.Models.RegisterModel
@{

ViewBag.Title = "Register";

}

<h2>Create a New Account</h2>

<p>

Use the form below to create a new account.

</p>

@*Include jQuery*@

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

@*Include jFluent*@

<script src="@Url.Content("~/Scripts/jFluent.js")" type="text/javascript"></script>

<script type="text/javascript">

//Fluent Rules for the Register page

function RegisterRules() {

$("#UserName").NotNullOrEmpty("User name cannot be null or empty")

.Matches("^([A-z]+\\s*)+$", "User name should be alpha with spaces only");

$("#Email").NotNullOrEmpty("Email cannot be null or empty")

.Email("Email address is not valid");

$("#Password").NotNullOrEmpty("Password cannot be null or empty")

.LengthGreaterThan(8, false, "Password should be more than 8 char long")

.Required(function (password) {

var userName = $("#UserName").val();

return userName != '' ? password.indexOf(userName) == -1 : true;

}, "User name cannot be a part of the password.");

$("#ConfirmPassword").NotNullOrEmpty("Confirm password cannot be null or empty")

.Required(function (confirmPassword) {

return confirmPassword == $("#Password").val();

}, "Password and confirm do not match.");

$("#IsProfessional").SelectRequired(function (isPro) {

return isPro == "True";

}, "Should be a professional");

$("#IsAdult").SelectRequired(function (isAdult) {

return isAdult == "true";

}, "Should be 18 years or older");

$("#SelectedProfessionId").Required(function (profession) {

var selectedIsPro = $("input:radio[name=IsProfessional]:checked").val();

if (selectedIsPro == "True") {

return profession != "-1";

}

return true;

}, "Should select a profession");

}

$(document).ready(function () {

//Add the Rules to jFluent

$.jFluentRules(RegisterRules);

$(document).submit(function (e) {

//Call jFluent validation

if (!$.jFluentValidate()) {

alert('validation failed!');

e.preventDefault();

}

});

});

</script>

@using (Html.BeginForm()) {

@Html.ValidationSummary()

<div>

<fieldset>

<legend>Account Information</legend>

<div class="editor-label">

@Html.LabelFor(m => m.UserName)

</div>

<div class="editor-field">

@Html.TextBoxFor(m => m.UserName)

@Html.ValidationMessageFor(m => m.UserName)

</div>

<div class="editor-label">

@Html.LabelFor(m => m.Email)

</div>

<div class="editor-field">

@Html.TextBoxFor(m => m.Email)

@Html.ValidationMessageFor(m => m.Email)

</div>

<div class="editor-label">

@Html.LabelFor(m => m.Password)

</div>

<div class="editor-field">

@Html.PasswordFor(m => m.Password)

@Html.ValidationMessageFor(m => m.Password)

</div>

<div class="editor-label">

@Html.LabelFor(m => m.ConfirmPassword)

</div>

<div class="editor-field">

@Html.PasswordFor(m => m.ConfirmPassword)

@Html.ValidationMessageFor(m => m.ConfirmPassword)

</div>

<div class="editor-label">

@Html.LabelFor(m => m.IsProfessional)

</div>

<div class="editor-field">

Yes @Html.RadioButtonFor(m => m.IsProfessional, true)

No @Html.RadioButtonFor(m => m.IsProfessional, false)

@Html.ValidationMessageFor(m => m.IsProfessional)

</div>

<div class="editor-label">

@Html.LabelFor(m => m.SelectedProfessionId)

</div>

<div class="editor-field">

@Html.DropDownListFor(m => m.SelectedProfessionId, (List<SelectListItem>) ViewBag.Professions)

@Html.ValidationMessageFor(m => m.SelectedProfessionId)

</div>

<div class="editor-label">

@Html.LabelFor(m => m.IsAdult)

</div>

<div class="editor-field">

@Html.CheckBoxFor(m => m.IsAdult)

@Html.ValidationMessageFor(m => m.IsAdult)

</div>

<p>

<input type="submit" value="Register" />

</p>

</fieldset>

</div>

}

The Action method for the load of the Register page is shown below:

In ASP .NET MVC 4, you can create a bundle (in function RegisterBundles in BundleConfig.cs) for jFluent as shown below.

 bundles.Add(new ScriptBundle("~/bundles/jFluent").Include("~/Scripts/jFluent.js"));

You can add the bundle to your View as shown below (in .cshtml) :

If you want a common single message for all rules on an input field then do the following:

 @Html.ValidationMessageFor(m => m.Email, "Common single error message here")

jFluent does single field validation on input Change event i.e. the input element that has changed is validated for all rules attached to it.

If you want to turn off validation on input Change event, you can specify an option:

 $.jFluentRules(RegisterRules, { validateOnChange: false });

Support blog:

I have setup a support blog where you can post requests for support.

http://jfluentvalidationplugin.blogspot.com.au/

Contribute:

If you want to contribute, the project is hosted on open source sites like:

GitHub:

https://github.com/VeritasSoftware/jFluent

Codeplex:

http://jfluent.codeplex.com

Also, you can add the plugin to your ASP .NET MVC project through the "Manage NuGet Packages" Visual Studio add-in.

NuGet:

https://nuget.org/packages/jFluent