Using JQuery with Aurelia for validation

Rajnilari2015
Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 323 red flag
Rating: 4 out of 5  
 1 vote(s)

JQuery is a popular lightweight, "write less, do more", JavaScript library while Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. In this article, we will look into how to use JQuery with Aurelia for validation.


 Download source code for Using JQuery with Aurelia for validation

Recommendation
Read Bind MultiSelect listbox in Aurelia before this article.

Introduction

JQuery is a popular lightweight, "write less, do more", JavaScript library while Aurelia is a modern, open source client side JavaScript framework for web and mobile application development. In this article, we will look into how to use JQuery with Aurelia for validation.

Aurelia - Project Setup

Create a folder say AureliaExperiment at your favourite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

Objective

Suppose we have some checkbox say hobbies checkbox. The user has to choose atleast one hobbies. If not then the system will inform the same to the user

The user interface looks as under

Straight to Experiment

At first, we need to install JQuery from here.

As a second step, we need to add

import $ from 'jquery';
in the app.js file. We can then use the $ JQuery symbol for the JQuery operation. Let us look into our implementation for app.js file.

app.js
---------
import $ from 'jquery';

export class App {  

  validate()
  {
      $("#btnCheck").click(function () {

      			//if no hobby is selected, then inform the user

                if ($("input:checkbox[name=Options]").is(":checked")==false) {

                        $("#spMessage").html("<b style='color:red'>Please Select atleast one hobby</b>");                    

                }

                //hobbies choosen
                else 
                {

                    var texts = "";
                    var values = "";

                    // append the selected hobbies
                    $("input:checkbox[name=Options]:checked").each(function () {                        

                        values += $(this).val() + ",";

                        texts += $("label[for=" + $(this).prop("id") + "]").text() + ",";

                    });                   

                    //remove the trailing commas(,)
                    values = values.substring(0, values.length - 1);
                    texts = texts.substring(0, texts.length - 1);

                    //display the selected hobbies choosen by the user
                    $("#spMessage").html("<b style='color:green'>Selected Options</b><br/><b>Texts :</b>" + texts + "<br/><b>Values :</b>" + values);

                } //end else

            }); //end click function
  		} //end of validate function
   } //end of app class

The program is very simple.

if ($("input:checkbox[name=Options]").is(":checked")==false) {

        $("#spMessage").html("<b style='color:red'>Please Select atleast one hobby</b>");                    

}

The above code snippet informs the user by displaying a message Please Select atleast one hobby if no hobby is selected.

In the else part, we are capturing the selected hobbies.

// append the selected hobbies
$("input:checkbox[name=Options]:checked").each(function () {                        

    values += $(this).val() + ",";

    texts += $("label[for=" + $(this).prop("id") + "]").text() + ",";

}); 

And finally displaying the same to the user by placing the message into a span(#spMessage) tag

$("#spMessage").html("<b style='color:green'>Selected Options</b><br/><b>Texts :</b>" + texts + "<br/><b>Values :</b>" + values);

Now let's open the app.html file and write the below template

app.html
---------
<template>
  
	<h2><font color="green">Demonstration of using JQuery with Aurelia for validation</font></h2>
  
  	<b>Select atleast one hobby</b><br /><br />

        <input type="checkbox" id="chkMusic" value="music" name="Options" />

        <label for="chkMusic">Listening Music</label>

        <input type="checkbox" id="chkCricket" value="cricket" name="Options" />

        <label for="chkCricket">Watching Cricket</label>

        <input type="checkbox" id="chkReading" value="reading" name="Options" />

        <label for="chkReading">Reading Books</label>

        <input type="checkbox" id="chkCooking" value="cooking" name="Options" />

        <label for="chkCooking">Cooking Food</label>

        <input type="button" id="btnCheck" value="Validate" click.delegate = "validate()"/><br /><br />

        <span id="spMessage"></span>
</template>

When the user clicks on the validate button without choosing any hobby, the system's response

And when the user clicks on the validate button by choosing some hobby/hobbies, the system's response

Reference

Binding: Basics

Conclusion

In this article we have learnt how to use JQuery with Aurelia for validation. Hope this will be useful. Thanks for reading. Zipped file attached.

Recommendation
Read Bind Dropdown in Aurelia after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)