Using JQuery with Aurelia for validation

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';

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

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.