Writing custom validations using jquery form wizard

Question

I'm using jquery Form Wizard, and would like to write custom validation rules.

My current issue is that I would like to validate a field as a URL, but if the user forgot to add the "http://" prefix, I would like to not reject this, and instead add the prefix on the server side.

I'm currently using the url class for this validation, which doesn't support this option. To resolve, I would like to use a custom regex instead of the url validator (basically, just check that the URL field has a period and is at least five characters long).

I haven't been able to make jquery-ui-form-wizard use a regex or call a callback function to validate. Note - I want to validate on each step, not just on submit.

I add the following to the form wizard options, and my callback is called - but even if it returns false, clicking next still proceeds to the next page:

remoteAjax: {
  "page1" : {
    url: "./validateWizard1",
    dataType: "json",
    beforeSend: function() {
      // This code is called before "page1" is turned.
      return false;
    },
    success: handleValidateSubmit
  }
}

I would want to either set a custom error message (to be displayed in the standard way to the validations plugin), or reuse the URL message.

What's the best way to achieve this?

score 0 · Accepted Answer · answered Jan 23 '12 at 15:23

Here is an answer from the Jan Sundman, the author of jquery-form-wizard (he asked me to post it in his stead):

If I understand your question correctly, you would like to do the validation in the beforeSend method, before the request is sent to the server using the remoteAjax?

If I understand you correctly, you are using the validation plugin to validate the inputs, but the url rule does not support your need? If so, you can add new methods by using the http://docs.jquery.com/Plugins/Validation/Validator/addMethod in which you can use regexp and whatever you like.

That said, it seems that the beforeSend method in the wizard does not cut off the ajax call even though you return false. This is a bug and I will make a note to fix it in a coming release.

To work around this, try using the beforeSubmit callback instead (provided by the form plugin). e.g. :

remoteAjax: {
 "page1" : {
   url: "./validateWizard1",
   dataType: "json",
   beforeSubmit: function() {
     // This code is called before "page1" is turned.
     return false;
   },
   success: handleValidateSubmit
 }
}

I hope this helps.

The pointer to `addMethod` was right on - it's so simple - just check out the example: http://docs.jquery.com/Plugins/Validation/Validator/addMethod#examples — ripper234, Jan 23 '12 at 16:08

Writing custom validations using jquery form wizard

1 Answers1