Function call to trigger validation

[RyanEaves]

I have seen other people suggest this but not really follow through. It would be very handy to have a function that could be called to validate a form instead of needing to rely on form submission.

For instance, what if you are using Knockout or something similar to bind to the click event of a regular button, do some things, and then after you want to call validation? Or what if you don't want to use the submit function of a form at all?

As far as I can tell, this plugin has to control the flow after the button is clicked. In order for the validation to run the form must be submitted by either button click or calling submit().

[victorjonsson]

Yes, this have been discussed several times before. The different scenarios that you mention is supported, as long as you accept that the error messages would be displayed once you trigger the validation. You're not, however, able to check if the form is valid without displaying the error messages. Is that the real issue here?

Example:

<form id="my-form">
... 
 <a href="#" id="special-anchor">You can click here</a>
</form>
<script>
$.validate({
  form : '#my-form',
  onSuccess : function() {
     // what ever should happen if the form is valid...
    return false; // prevent the form from sending data to the server
  }, 
  onError : function() {
    // what ever should happen if the form is invalid
  }
});
$('#special-anchor').bind('click', function() {
  // Do the special stuff... and afterwards trigger the validation
  $('#my-form').trigger('submit');
});
</script>

[RyanEaves]

That is actually what I am doing now to work around the issue. What I am suggesting is that it be possible to do the exact same validation (including displaying the messages for invalid fields) via a function call that is not attached to submitting the form.

The reason is that most MVVM form implementations do not ever submit the form. It seems clunky to submit the form, and then cancel submission. Especially in light of my other suggestion to include the ability to validate groups of fields within the same form:

#128

Right now, I have to submit the form, either by submit button or function call, then if the validation is successful, make a call back into my viewmodel to the click event handler to do the actual work of the button (an ajax post).

If there was a function call I could make, then I could leave my MVVM implementation alone and just call the validate function during the button click event handler binding. Something like:

if ($.validate.checkGroup('validation-group') == true)) { //the form is valid }

That way, the MVVM world continues to work as expected with event bindings and it just makes a little call out to do the validation, if necessary for the particular button.

Maybe there is a reason that it MUST be attached to submit, but it just seems like it would be more compatible to all implementations if this were possible to call directly.

Thanks for looking at it and responding so quickly!

[victorjonsson]

This can in fact be done using $(...).validateForm(lang, config) but its undocumented since it's considered to be a part of the internal work made by the plugin. Here's an example http://codepen.io/anon/pen/fwJAy

Maybe doing a merge with default config inside of validateForm and renaming the function to isValid would be enough to meet your needs? The implementation would look something like:

// Call the setup function only to load some validation modules
$.validate({
 modules : 'security, date'
});

// Optional configuration and language parameters
var myLang = {},
      myConf = {};

var someFunction = function() {
   // things happen here...
  if( $('#my-form-group').isValid(myLang, myConf) ) {
     // do stuff...
  }
};

[peterblunt]

For pure validation without submitting I tinkered this:

// Default config
conf = $.formUtils.defaultConfig();
conf.language = formvalidator_de;
conf.modules =  'security, date';

// Call the setup function
$.validate({
    language:   conf.language,
    modules:    conf.modules
});


/* maybe used for single item validation - example for 'validate_length' validator
isValid = function () {
    return $.formUtils.validators['validate_length'].validatorFunction($('#input').val(), $('#input'), conf, conf.language, $('#form'));
}
*/

function validate(form) {
    var $form = form;
    if ($.formUtils.isLoadingModules) {
        setTimeout(function () {
            validate($form);
        }, 200);
        return false;
    }
    else {
        var valid = $form.validateForm(conf.language, conf);
        if (valid && typeof conf.onSuccess == 'function') {
            var callbackResponse = conf.onSuccess($form);
            if (callbackResponse === false)
                return false;
        } else if (!valid && typeof conf.onError == 'function') {
            conf.onError($form);
            return false;
        } else {
            return valid;
        }
    }
}

$('#myButt').click( function() {
    validate($('form'));
});

Works good for my purpose.

[RyanEaves]

That is exactly what I needed. And It solves my need to validate groups of fields too since it is not based on entire form submission. Thanks to you both.