HTML5 Custom Form Validation with Ajax

It is fairly easy to create HTML5 form validation with non-ajax. But I found out that form validation with ajax is bit tricky. If anyone knows better way please let me know.

The problem was when to call setCustomValidity(). I had to call it inside of onclick event handler which runs just before form submission.

So, when you click on submit button, onclick is fired and initValidation() is called. The method checks whether input is equals to the string "tt". If so it will set custom error message (i.e. setCustomValidity() )

You have to make sure to kill the submit by event.preventDefault()

NOTE: I tried this without using onclick. I put form validation code inside of submit() but setCustomValidation() is called too late there thus error popup didn't show up. (if you click submit one more time, it will show the popup.)

CODE:

      Test1: 
      Test2:   
      

$(document).ready(function() {
    $("#myForm").submit(function(event) {
        event.preventDefault(); //cancel submit
        
        //your ajax code here...
    })
});

function initValidation() {
    var mtxt = document.getElementById("myText");
    mtxt.setCustomValidity(""); //reset
    
    if($("#myText").val() == "tt") {
        mtxt.setCustomValidity("this is my custom error message");
    }
}

Strategy design pattern (Masatosan version)

I've seen countless Strategy pattern described on the web and none of them really get me so far. They use Dog, Cat, Coffee, even worse, JComponent.. sure I can "programming to interface not implementation."

Still not getting it without writing my own strategy pattern with my own words. (Doesn't matter what terms I use, the point is I get the concept!)

Here is my version of strategy design pattern:

    

public interface Console {
    public void launchGame();
}

public class XBox360 implements Console {
    public void launchGame() {
        System.out.print("I see the ring of death!");
    } 
}

public class PlayStation3 implements Console {
    public void launchGame() {
        System.out.println("SONY is being hacked by a kid");
    }
}

public class Wii implements Console {
    public void launchGame() {
        System.out.println("I think my Wii controller is in my neighbor's backyard");
    }
}

public class Me {
    private Console console = null;

    public Me(Cosole console) {
        this.console = console;   
    }

    public setConsole(Console console) {
        this.console = console;
    }

    public void turnOn() {
        if(console != null) {
            console.launchGame();
        }
    }
}

public class Test {
    public static void main(String[] args) {
        Me me = new Me(new XBox360());
        me.turnOn(); //"I see the ring of death!"
        me.setConsole(new PlayStation3());
        me.turnOn(); //"SONY is being hacked by a kid"
        me.setConsole(new Me(new Wii());
        me.turnOn(); //I think my Wii controller is in my neighbor's backyard")
    }
}

    

Custom form validation with HTML5!

I know there are many HTML5 form validation on the web but I made my own test demo so let me share.

The important thing is I wanted to create my own custom validation rule and custom error message.

I have 2 input text fields. Left field value has to be smaller than right field value. (like to-from date if u will)
Then my javascript compare each value and triggers custom validation error.

Note that you must remember to put empty string in setCustomValidity() otherwise after error is thrown, second time input will still cause custom error message to be shown.

For more detail about custom validation, check out: http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#dom-cva-setcustomvalidity

Custom: less: <= more:

Code:

  

Custom: less: <= more:


  

Firefox 8.0.1 - cookies play important role for web storage!

I read online article somewhere asking where the Web Storage data are stored. During my research I encountered interesting facts that deleting cookies cause sessionStorage data to be removed and this behavior differs per browser (IE, Chrome, Firefox).

I tested Firefox 8.0.1 with 2 ways.

Case 1
1. create localStorage data, sessionStorage data
2. remove all cookies using browser
Case 2
1.create localStorage data, sessionStorage data
2. remove cookies.sqlite from my firefox profile directory.
(i.e. C:\Users\masatosan\AppData\Roaming\Mozilla\Firefox\Profiles\1nc1d3r.default\cookies.sqlite)

Case 1 results in both data in localStorage and sessionStorage be removed.
Case 2 does not seem to have effect. Local storage persists and session storage is removed when I had to close the Firefox to delete mysqlite file.

You can use demo below:

• generate button - creates session/local storage data
• 2 text fields displays the session/local storage data

You can click on generate and try removing cookies in anyway and reload the page to see what will happen.



session
local

Netbean is not closing port 1527 ???

Environment
Windows 7, Netbean 7.0.1

I downloaded Netbean 7.0.1 bundle with Glassfish 3.1. But I removed Glassfish 3.1 from Netbean IDE and then I choose to "Add server" from service tab in Netbean IDE because I haveGlassfish 3.1 Multilingual version in my C drive.

Right after I added the Glassfish server, I can start it by right click on my project and run the server.

However when I close the Netbean IDE and restart the IDE and try to run the server by right click on my project, execute the project, the log says server is starting but it hangs there and the server won't start.

I made sure the port is not occupied too. (if occupied it should say so in the log but log does not throw any errors)

So my question is do I have to remove the server, add server every time I start Netbean when I don't use bundled Glassfish? (most likely not though..)

repro step:
1. install Netbean 7.0.1
2. from IDE service tab, right click on Glassfish3.1 and remove it.
3. at service tab, right click and choose add server
4. choose Glassfish 3.1 server that is separately downloaded (i.e. not bundled)
5. go back to project tab, choose to run the project
6. verify that project successfully deployed, Glassfish 3.1 is started, browser popup up.
7. close Netbean 7.0
8. start Netbean 7.0
9. at the project tab, choose to run the project 

result:
The glassfish 3.1 won't start.

I found out the db log is showing port 1527 is in use (couldn't figure out at first because Netbean Japanese version has encoding issue)

2011-12-12 04:21:38.040 GMT : セキュリティーマネージャーが Basic サーバーセキュリティーポリシーを使用してインストールされました。
2011-12-12 04:21:38.263 GMT : Apache Derby Network Server - 10.5.3.0 - (802917) ????μ∑?????????????????? 1527 ???????∂?????????????????∫??????????‰∫?????????????

The above DB log output in English locale is:

Could not listen on port 1527 on host localhost: 
 java.net.BindException: Address already in use: JVM_Bind

Basically having same issue as:

http://forums.netbeans.org/topic42385.html

see if i can modify domain.xml to use different port than 1527..