Is it possible to validate onSubmit only and not onFocus?

[cpidx]

Stopping it from validating until the user clicks the submit button would be great. I'm having a lot of fun with your plugin. You have a great eye for details.

[elclanrs]

Don't understand why you would want to validate only on submit. I mean, the purpose of Ideal Forms is live validation, "on the spot"... What are you trying to do? Maybe I can help.

[cpidx]

Thank you for your quick response. I didn't know the intended purpose of Ideal Forms was for on-the-fly validation only. I really like the form styles you put together and the validation behavior, so I'm attempting to use your plugin, for those purposes, across my entire application.

The reason I need an on-submit mode is because I wouldn't want to interrupt the user (alerting him that he's wrong) before he's finished typing his email username during login. In other parts of the application I will need on-the-fly validation (long forms, etc.).

I'm currently working on the login page and need on-submit validation for the email username "email,required" and for the password "required". I'll be using a bootstrap notification for "invalid login, please try again - reset password". I'd send you a screenshot, but GitHub doesn't allow attachments.

[elclanrs]

Oh I think I get it now. I understand you want to hide the default error and/or icons to use your custom error inside a Bootstrap modal dialog if the form fails on submit right?. If that's what you want to do you can use flags to hide the default error and/or icons, and some Ideal Forms methods to handle validation.

<form id="myform">
  <div><label>Username:</label><input type="text" name="user" class="required username"/></div>
  <div><label>Password:</label><input type="password" name="pass" class="required pass"/></div>
  <div><label>E-Mail:</label><input type="email" name="email" class="required email"/></div>
</form>

var options = {
  globalFlags: 'noerror noinvalidicon',
  onFail: function() {
    // The first input that failed validation
    var $firstInvalid = $myform.getInvalid().first().find('input');
    var firstInvalidName = $firstInvalid.attr('name');

    // Handle custom errors with Bootstrap dialogs here

    $myform.reset([firstInvalidName]);
  }
};
var $myform = $('#myform').idealforms(options);

[cpidx]

Not exactly - here's a simplified version of what I need...

I do not want to validate the "Log In form" fields when a user clicks a text input.

I want to validate the "Log In form" fields when a user clicks the submit button. If the data is formatted correctly, then post the form data to the server.

[cpidx]

The "Log In form" currently works perfectly when I click submit. The problem is if I haven't clicked submit it wants to validate everything I do before I get a chance to finish typing it in. :-)

[elclanrs]

I'm trying to see your link but the pass doesn't work.

[elclanrs]

All of that is possible.

I do not want to validate the "Log In form" fields when a user clicks a text input.

Use flags to hide the error and remove the valid/invalid classes. This is what you need to "disable" live validation.

I want to validate the "Log In form" fields when a user clicks the submit button. If the data is formatted correctly, then post the form data to the server.

Use the onSuccess and onFail options:

var $myform = $('#myform').idealforms({
  globalFlags: 'noerror noinvalidicon noclass',
  onSuccess: function(e) {
    e.preventDefault(); // to handle AJAX request
    // Everything is fine submit data to server
  },
  onFail: function() {
    // The first input that failed validation
    var $firstInvalid = $myform.getInvalid().first().find('input');
    var firstInvalidName = $firstInvalid.attr('name');
    // Handle custom errors with Bootstrap dialogs here
    $myform.reset([firstInvalidName]);
  }
});

[cpidx]

I deleted, re-created, and tested the password. Please try accessing the example again and let me know if you have any problems.

[elclanrs]

Still doesn't work... I'm trying to set up an example at jsFiddle to show you that is possible with the instructions above.

[cpidx]

Thank you for the code snippet. I will try your solution after you've seen the sandbox site.

[cpidx]

It's just windows authentication. Then you should be able to see the login page I coded with the help of Ideal Forms. That styled login doesn't go anywhere.

[elclanrs]

Still can't access for some reason... Got it working here: http://jsfiddle.net/elclanrs/BUAHH/. I put some alert messages but that's the simplest example, you can do whatever you like, modal dialogs, AJAX...

[elclanrs]

I see now. I'll see what's possible... I can maybe add an option to just validate on submit. I'll get back to you soon. Btw it looks really slick!

[cpidx]

Awesome, thank you! I'm going to turn the security on again in a minute. I just wanted you to see what I was trying to do. :-) Thanks again - I really appreciate your help!!

[elclanrs]

After looking at the code it looks like is not worth doing because of the way Ideal Forms works it would mean some refactoring that is probably not needed for anything else...

Anyhow I found a simple solution that works with the previous code I proposed. Basically you just add the noerror flag and show the error on submit if it fails validation Put it inside a setTimeout to make sure it shows the error after the noerror flag hides it. The only thing is that as soon as you type something in the input the error will dissapear, I guess this is the behavior you're expecting right? I mean the icons and effects will still work but the error will only show up on submit.

Check demo here: http://jsfiddle.net/elclanrs/BUAHH/