enable submit button on validate

[BernardA]

Hello

I do not want to enable submit unless form is validated. So I set submit do disabled on document ready
and I only want it to be enabled when form is validated.

But my code below is not working.

What am I missing?

Thanks
Bernard

$(".sub").prop('disabled', true);

<script>
  $.validate({
    modules : 'security, file',         
    form : '#signup_form , #login_form, #recovery_form',
    onValidate : function() {
$(".sub").prop('disabled', false);
    }
  });
</script>

[victorjonsson]

That's not completely trivial. When I tried to write a solution I actually found a bug in the event onElementValidate (new release with patch is on the way out to cdnjs). Luckily there was an alternative way. I don't have time to explain the code but you can see it in action here http://jsbin.com/kahinuqovi/4/edit?js,output (you need to click once on the button "run with js" for some reason)

jQuery(function($) {

  // Our forms
  var $allForms = $('#signup_form, #login_form, #recovery_form'),

      // Our overriding error dialogs
      lang = {},

      // flag telling us if we're checking the entire form
      isCheckingIfFormValid = false,

      // Our validation configuration
      config = {
        language : lang,
        modules : 'security, file',
        validateOnBlur : false, // disable ordinary onblur validation
        form : $allForms,
        validateOnEvent : true // make the plugin search for validation event
      },

      // Function that can enable/disable form
      toggleFormState = function($form, state) {
        if( state == 'disabled' ) {
          $form.find('.submit').attr('disabled', 'disabled');
        } else {
          $form.find('.submit').removeAttr('disabled');
        }
      };

  // Make all inputs validated on keyup, require validateOnEvent in validation config
  $allForms.find('input').attr('data-validation-event','keyup');

  // Disable all forms
  toggleFormState($allForms, 'disabled');

  // Toggle form state depending on if it has only valid inputs or not.
  $allForms.find('input').on('validation', function(evt, valid) {
    if( !isCheckingIfFormValid ) {
      isCheckingIfFormValid = true;
      var $form = $(this).closest('form');
      if( valid && $form.isValid(config, lang, false) ) {
        toggleFormState($form, 'enabled');
      } else {
        toggleFormState($form, 'disabled');
      }
      isCheckingIfFormValid = false;
    }
  });

  // Setup validation
  $.validate(config);
});

[BernardA]

wow, that was way more elaborate than I could imagine.

I checked jsbin and it seems to do what I was looking for.
I will test later on my actual application and let you know.

Does your comment about the bug mean that this 'patch' won't be necessary once the bug is fixed?

Thanks a lot.

Bernard

[victorjonsson]

No, the patch is for something else. You will still have to do it this way.

But I'm thinking on the possibility to have this feature shipped in form of a module so you only would need to do something like this:

$.validate({
  modules : 'security, file, toggle-disabled',
  toggleDisabledForm : '#signup_form, #login_form'
});

[BernardA]

**I am getting an error
val.split is not a function on line 10 of the validator

I placed a mock up of the page online at https://www.soeezauto.ma/used_signup.php

**Another comment and this you can observe on jsbin, is that the error message is showing up on focus, which is not a desirable behavior. Unless you mean that as suggestion, but I could not find it on your code.

Thanks
Bernard

[victorjonsson]

You are using an old version of the plugin. The latest is //cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.0/jquery.form-validator.min.js.

I agree that you don't want the error message to be displayed immediately when input is focused. But when would be appropriate? I will give it some thought...

[BernardA]

Ok, got it, but then the toggling of submit is not working.
I placed 2 versions online:

• https://www.soeezauto.ma/used_signup.php ( without prior disabling of submit)
• https://www.soeezauto.ma/used_signup_disabled.php ( where I disable submit on doc.ready)

As per your question on the error message, it logically should be shown when an error exists. Not before input of the field and not wait until all fields are input.

The original behavior of your validator is just fine. Just stick to it.

Regards
Bernard

[victorjonsson]

Your code should work if you rename the class from sub to submit or if you change the class name reference in the js-function toggleFormState to .submit

[BernardA]

Indeed, thanks a lot.

Concerning the error messages, I changed/commented out the following lines on your code, and it seems to work as desired ( well, the way I desired ).

validateOnBlur : true, //$allForms.find('input').attr('data-validation-event','keyup');