Validate input for prompts/open modals about vex HOT 8 CLOSED

var login;

login = function(email, password, callback) {
  // `setTimeout` for demo purposes only
  // Here you could make an asynchronous request to your server.
  return setTimeout(function() {
    if (email === '[email protected]' && password === 'test') {
      return callback('success');
    } else {
      return callback('An error occurred logging in. Try email `[email protected]` and password `test`.');
    }
  });
};

vex.dialog.prompt({
  className: 'vex-theme-default',
  message: 'Log in with your email and password',
  input: '<input name="email" type="email" class="vex-dialog-prompt-input" placeholder="[email protected]" value="" required>\n<input name="password" type="password" class="vex-dialog-prompt-input" placeholder="password" value="" required>',
  onSubmit: function(event) {
    var $vexContent;
    event.preventDefault();
    event.stopPropagation();
    $vexContent = $(this).parent();
    return login(this.email.value, this.password.value, function(message) {
      if (message === 'success') {
        return vex.close($vexContent.data().vex.id);
      } else {
        return console.error(message);
      }
    });
  }
});

from vex.

You can set your own input allowing you full control. For an HTML-only solution, you could use HTML's build in form validation by making the input the appropriate type and setting required. For example, for a prompt which captures and validates an email address, you could do the following:

vex.dialog.prompt({
    className: 'vex-theme-default',
    message: 'Set your email:',
    // By specifying type="email" and making it required, only valid emails will be allowed to be submitted
    input: '<input name="vex" type="email" class="vex-dialog-prompt-input" placeholder="[email protected]" value="" required>'
});

Demo on jsFiddle

from vex.

Thanks adamschwartz.

Unfortunately this is only useful for modern browsers and does not support custom validation (such as querying against data) or custom errors.

from vex.

If you're looking for something which handles asynchronous form validation, you'll want to set the onSubmit option. Here's an example which checks if email is [email protected] and password is test before "logging in" and closing the dialog.

login = (email, password, callback) ->
    # `setTimeout` for demo purposes only
    # Here you could make an asynchronous request to your server.
    setTimeout ->
        if email is '[email protected]' and password is 'test'
            callback 'success'
        else
            callback 'An error occurred logging in. Try email `[email protected]` and password `test`.'

vex.dialog.prompt
    className: 'vex-theme-default'
    message: 'Log in with your email and password'
    input: '''
        <input name="email" type="email" class="vex-dialog-prompt-input" placeholder="[email protected]" value="" required>
        <input name="password" type="password" class="vex-dialog-prompt-input" placeholder="password" value="" required>
    '''
    onSubmit: (event) ->
        event.preventDefault()
        event.stopPropagation()

        $vexContent = $(@).parent()

        login @email.value, @password.value, (message) ->
            if message is 'success'
                vex.close $vexContent.data().vex.id
            else
                console.error message

Demo on jsFiddle

from vex.

Brilliant, thanks Adam.

On 22 May 2014 19:51, Adam Schwartz [email protected] wrote:

If you're looking for something which handles asynchronous form
validation, you'll want to set the onSubmit option. Here's an example
which checks if email is [email protected] and password is test before
"logging in" and closing the dialog.

login = (email, password, callback) ->
setTimeout ->
if email is '[email protected]' and password is 'test'
callback 'success'
else
callback 'An error occurred logging in. Try email [email protected] and password test.'
vex.dialog.prompt
className: 'vex-theme-default'
message: 'Log in with your email and password'
input: ''' '''
callback: (data) ->
console.log data
onSubmit: (event) ->
event.preventDefault()
event.stopPropagation()

    $vexContent = $(@).parent()

    login @email.value, @password.value, (message) ->
        if message is 'success'
            vex.close $vexContent.data().vex.id
        else
            console.error message

Demo on jsFiddle http://jsfiddle.net/adamschwartz/r27K5/show/light/

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/59#issuecomment-43928824
.

from vex.

Hey, what would the javascript equivalent of this be?

from vex.

Damn, thanks for the fast reply!

from vex.

No problem! 😄

If you’re curious, I went to http://coffeescript.org, clicked “Try Coffeescript” at the top, and pasted the coffeescript into the input (and manually added back the comment which was stripped out). The direct JS output isn’t always this readable, but it worked pretty well in this case.

from vex.