Problem displaying error message

[mikerandall]

Hi,

I'm using your keyboard to collect an email address. When using the 'validate' method, I've noticed a kind of catch 22: the only way the accept button becomes activated is if the validate method passes. What I would like to do is change the preview field text color to red (indicating an error) and maybe pop a modal window that says "please enter a valid email address." The problem here is that either the text color will turn red and the modal will pop at every keystroke, or it will never pop because the validate method passes. I've tried using other methods, like accept and beforeClose, to try to pop the error but it just didn't work out. What is the appropriate way to do this?

Thanks,
Mike

[Mottie]

Hi mikerandall!

Hmm, I think I see your point. There isn't a way to show an error message if the accept button is disabled. I made a demo of how I would do it, and yeah there is no way to get the alert to show up

$('#keyboard').keyboard({
    acceptValid : true,
    validate: function(keyboard, value, isClosing) {
        // test value for an email address
        var test = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/.test(value);
        // if the value is invalid, clear the input
        if (!test && isClosing) {
            alert('please enter a valid email address');
        }
        keyboard.$preview[test ? 'removeClass' : 'addClass']('invalid');
        keyboard.$preview[test ? 'addClass' : 'removeClass']('isvalid');
        // return valid test (true or false)
        return test;
    }
});

I think I'll remove the part that disables the accept button and maybe have it add a class to the accept button automatically to indicate if it's valid or invalid so you can style the button.

I need to track down a bug with switching inputs, but I will get this in the next update. Thanks for pointing out the problem!

[Mottie]

Ok,

I've changed the plugin so now the accept button gets a class of ui-keyboard-valid-input or ui-keyboard-invalid-input instead of being disabled.

There is also a new option named cancelClose which is set to true by default and if the user clicks on the accept button and the input isn't valid, it will cancel the keyboard close. Check out this updated demo

$('#keyboard').keyboard({
    acceptValid : true,
    validate: function(keyboard, value, isClosing) {
        // test value for an email address
        var test = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/.test(value);
        // if the value is invalid, clear the input
        if (!test && isClosing) {
            alert('please enter a valid email address');
        }
        // return valid test (true or false)
        return test;
    }
});​

[mikerandall]

Wow, you seriously kill it with the turnaround time! I'm going to update my code now and check out these changes. I'll let you know how it goes. Thanks!

[mikerandall]

Ok, I think we're almost there. If I have added an accept method, and validate returns false, the accept method is still called: http://jsfiddle.net/MK947/76/ Am I doing this wrong?

[Mottie]

Ok, I had to update the plugin once again :P

I forgot to have theaccept() and close() api function return an accpeted status. So now you can do this in the accepted keyaction function - updated demo

$.extend($.keyboard.keyaction, {
    accept: function(base) {
        if (base.accept()) {
            alert('Accepted!');
        }
    }
});

[mikerandall]

Awesome, that worked! Thanks!