Problem displaying error message #88

Closed
mikerandall opened this Issue Jul 23, 2012 · 6 comments

Comments

Projects
None yet
2 participants
@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

This comment has been minimized.

Show comment Hide comment
@Mottie

Mottie Jul 24, 2012

Owner

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!

Owner

Mottie commented Jul 24, 2012

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

This comment has been minimized.

Show comment Hide comment
@Mottie

Mottie Jul 24, 2012

Owner

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;
    }
});​
Owner

Mottie commented Jul 24, 2012

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

This comment has been minimized.

Show comment Hide comment
@mikerandall

mikerandall Jul 24, 2012

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!

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

This comment has been minimized.

Show comment Hide comment
@mikerandall

mikerandall Jul 24, 2012

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?

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

This comment has been minimized.

Show comment Hide comment
@Mottie

Mottie Jul 24, 2012

Owner

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!');
        }
    }
});
Owner

Mottie commented Jul 24, 2012

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

This comment has been minimized.

Show comment Hide comment
@mikerandall

mikerandall Jul 24, 2012

Awesome, that worked! Thanks!

Awesome, that worked! Thanks!

@Mottie Mottie closed this Aug 1, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment