jQuery Validation Plugin

Idag har jag hunnit prova jQuery Validation Plugin och jag måste säga att jag är ganska imponerad för att den är väldigt enkel att använda men ändå kraftfull i den bemärkelsen att det finns många inställningsmöjligheter. Jag har slängt ihop ett litet pseudokod exempel här under.

jQuery plugin: Validation

En artikel om jQuery plugin: Validation


<script type="text/javascript" src="/js/jquery.validate.js"></script>

<form action="/login.php" method="post" id="topLoginForm">
	<ul>
		<li><label for="username">e-post:</label> 
                    <input id="username" type="text" name="username" class="required email" /></li>
		<li><label for="password">lösenord:</label>
                     <input id="password" type="password" name="password" class="required" /></li>		
		<li><input type="submit" value="Logga in" /></li>	
	</ul>
</form>


<script type="text/javascript">

     //Svenska felmeddelanden
    $.extend($.validator.messages, {
    	  required: "Du har glömt att fylla i detta fält",
    	  email: "Fyll i en giltig e-postadress"    	  
    });
    
    $(document).ready(function(){
       $("#topLoginForm").validate();
    });           
	    
    
});

</script>

QUnit test

Jag har gjort ett snabbtest av Jquery’s Quint testramverk och det verkar ganska smidigt. QUint hemsida finns här. På hemsidan finns det exempel och källkod.

Här under kommer mitt extremt snabba test. Min anledning till att testa QUnit var om jag skulle använda ramverket i ett av mina egna projekt och det här lilla testet svarade på min fråga att det skulle duga alldeles utmärkt.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
  <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script>
$(document).ready(function(){
	    
test("Ett snabbt test", function() {
  ok( true, "Det här testet fungera" );
  
  var value = "sant";
  var expectedValue = "sant"
  
  equals( expectedValue, value, "Vi tror att 'value' skall innehålla samma värde som 'expectedValue'" );
});

module("Test Modul");

asyncTest("Ett async test", function() {
  setTimeout(function(){ //Väntar i tre sekunder.
    ok(true, "funkar altid");
    start();
  }, 3000);
});


});
</script>
  
</head>
<body>
 <h1 id="qunit-header">QUnit Snabb test</h1>
 <h2 id="qunit-banner"></h2>
 <div id="qunit-testrunner-toolbar"></div>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture"></div>
</body>
</html>

bdd

Jag har börjat testa Jasmine nu ett tag som är ett Behavior-Driven Development ramverk för att testa JavaScript och här kommer ett exempel hur man kan använda det.

  • lib / jasmine* (ramverket)
  • src / * (Din källkod)
  • spec / * (Vad du vill att din kod skall kunna göra)
  • SpecRunner.html (Kör dina tester)
<!-- include source files here... -->
  <script type="text/javascript" src="src/Item.js"></script>
  <script type="text/javascript" src="src/List.js"></script>
  

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/ItemSpec.js"></script>
  <script type="text/javascript" src="spec/ListSpec.js"></script>
describe("Item", function() {

	it("should be able to store a name", function() {

		var expected = "test1234";

		var item = new Item();

		item.setName(expected);

		expect(item.getName()).toEqual(expected);

	});

	it("should be able to store a name", function() {

		var expected = "test1234200";

		var item = new Item();

		item.setName(expected);

		expect(item.getName()).toEqual(expected);

	});

});
function Item() {
	this.name = "";
	this.getName = function () {
		return this.name;
	};
	
	this.setName = function (name) {
		this.name = name;
	};
}

Min exempelkod

console.log

Det flesta webbläsare stödjer i dag någon sorts loggning via log funktionen. log funktionen brukar finnas på console objektet. console objektet om det finns brukar ligga i webbläsaren globala scope. Så på de flesta sajter jag har jobbat med har lagt till denna funktionalitet för kunna ha lite enkel loggning i de flesta webbläsare.

function debug(obj) { 
	"use strict";
	if (window.console && window.console.log) {
		window.console.log(obj);
	}
}